Why isnt Bootstrap Grid working properly after my main header?
Question
Everything works fine in the main header section. What im trying to do is create a simple row with 3 columns after it but they are displaying as 3 different rows and not 1 row with 3 columns? Below is the code. It strange because the header section is working perfect! Thank you for any help and advice!
<!DOCTYPE html>
<html>
<head>
<title>The Beckwood - Scunthorpe</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=satisfy" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
<div class="header-main">
<nav class="navbar navbar-default">
<div class="container">
<a class="navbar-brand" href="#" >
<img src="assets/img/logo.png">
</a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">BOOK A TABLE</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
<div class="hero">
<h1 id="welcome">Welcome to The Beckwood.</h1>
<p>The Beckwood is a family run pub located in scunthorpe offering quality homemade food, carverys, events and live sports.</p>
<div class="btn btn-primary">View Menu</div>
<div class="btn btn-primary">Book a table</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
</body>
</html>
CSS CODE, MAYBE SOMETHING IN HERE IS EFFECTING IT?
body {
font-family: 'Montserrat', sans-serif;
}
.navbar-brand {
padding: 0px;
}
.navbar-brand>img {
height: 90px;
width: auto;
}
.logo {
height:200px;
width:400px;
}
.header-main {
color: white;
background: url("../../assets/img/banner.png") no-repeat ;
background-size: cover;
background-position: bottom;
padding-bottom: 20px;
}
.header-main .navbar-nav>li>a {
color: white;
font-size: 13px;
border-radius: 10px;
}
.header-main .navbar {
margin-bottom: 0px;
padding-top: 20px;
padding-bottom: 20px;
width: 100%;
border-bottom:none;
background-color: transparent;
min-width: 300px;
border: none;
}
.header-main .navbar-default .navbar-nav>.open>a,
.header-main .navbar-default .navbar-nav>.open>a:focus,
.header-main .navbar-default .navbar-nav>.open>a:hover {
color: #ccc;
background-color: transparent;
}
.header-main .nav>li>a:focus,
.header-main .nav>li>a:hover {
color: #ccc;
background-color: transparent;
}
.header-main .navbar-nav>li {
margin-right: 10px;
}
.header-main .navbar-nav {
margin-top: 12px;
}
.header-main .navbar-toggle {
background-color: transparent !important;
margin-top: 20px;
border: 1px solid #fff;
}
.header-main .navbar-toggle .icon-bar {
background-color: white;
}
.header-main .hero {
text-align: center;
margin-top: 80px;
margin-bottom: 100px;
}
.header-main .hero h1 {
color: #FFB03B;;
font-family: 'Satisfy', cursive;
font-size: 70px;
margin-bottom: 36px;
}
.header-main .hero p {
color: rgba(255, 255, 255, 0.6);
font-size: 18px;
max-width: 660px;
margin: 0 auto 20px;
font-weight: normal;
line-height: 1.5;
}
.header-main .btn-primary {
color: #fff;
background-color: transparent;
border-color: #fffbfb !important;
outline:none;
margin-right: 20px;
margin-top: 20px;
font-size: 19px;
padding: 18px 24px;
transition:0.2s background-color;
}
.header-main .btn-primary:hover {
background-color:rgba(255,255,255,0.1);
}
.header-main .btn-primary:active {
transform:translateY(1px);
}
@media screen and (max-width: 767px) {
.header-main .navbar-default .navbar-nav .open .dropdown-menu>li>a{
color: #fff;
font-size: 16px;
}
.header-main .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover{
color: #ccc;
}
.header-main .navbar-collapse {
margin-left: 20px;
border-top: none;
box-shadow: none;
}
.header-main .hero{
margin-top: 40px;
margin-bottom: 40px;
}
.header-main .hero h1{
font-size: 42px;
}
}
2 answers
solution1
2 ACCPTED 2018-03-12 19:40:42
Aside from the errors I posted in my latest comment, the real problem is that you're not specifying the size of each column. With bootstrap you have to specify how many grid columns each col will take up. Totalling 12 across. So for your code, you simply need to add a -4 to the class:
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
Here's a simple example that explains it more on W3:
https://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
solution2
0 2018-03-12 19:48:16
You are using Bootstrap 3 so you need to specify column width like col-sm-4 not col-sm . if you used Bootstrap 4 col-sm should be fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Why isnt my html and css grid not working?
Why isnt my Bootstrap datepicker working?
why isnt this jquery working properly?
Why isnt my menu working?
Why isnt my javascript working?
Why is an unrelated section of my Bootstrap site not rendering properly after adding a HTML5 video header?
Why is my bootstrap grid system not working?
Why isnt my grid responsive on mobile?
bootstrap grid system is not working properly
Why isnt my time format not working in javaScript
Related Tags