Bootstrap grid system question

1

Ok so I go my navbar at the top of my webpage to work and now I’m trying to add information beneath the navbar but for some reason the information is staying up top instead of going beneath the navbar. According to my understanding of the bootstrap grid system, every new row should appear on the webpage beneath the previous row right? So why is mine not beneath the navbar. P.S. I know I can easily fix this by using top margin on my header but I want to get a better understanding of the bootstrap grid system.

2

It’s because your .navbar class has the position:fixed property. Normally Bootstrap rows would stack on top on another, but this property removes that <div> from the normal flow of the page.

If you intend to make a navbar, you’re better off using Bootstrap’s classes for navbars. See the docs: https://getbootstrap.com/docs/3.3/components/#navbar

EDIT. Oh, and the Bootstrap docs actually advise you to add padding to the top of your page’s <body> when you do use fixed navbars.

3

I think you want to fix the navbar to the top, by:

  <div class= "col-md-12 navbar navbar-fixed-top">

And then you have to give the body some top padding to make sure that it starts below the navbar, so edit your *body element in your CSS:

body {
  background-color: black;
  padding-top: 70px; 
}
4

Thanks, I will just redo the whole think using the bootstrap framework.