All geek questions in one place

Bootstrap3: what is the standard structure and layout?

There are many bootstrap tutorials.

But I want to know where I should use nav / header / container / row / well / panel / section

eg. Do I need to use a row for column 12?

1- I'm currently doing this:

<body> <div class="container-fluid"> /*only for top navbar*/ <nav> </div> <div class="container"> /* for body */ <header></header> <main class="row"> <div class="col-md-2"></div> <div class="col-md-5"></div> <div class="col-md-5"></div> </main> <footer class="row"> <div class="col-md-4"></div> <div class="col-md-4"></div> <div class="col-md-4"></div> </footer> </div> </body>

It's true?

2- Is this format true or necessary?

 <div class="row"> <div class="col-md-12"></div> </div>

3, which is standard?

 <div class ="well"> <div class="row"> <div class="col-md-*"></div> </div> </div>

or

 <div class ="row"> <div class="well"> <div class="col-md-*"></div> </div> </div>

4 dose for this you need a class "container" for the entire section or only for the parent section?

+5
source share
3 answers

for 1: - yes, this is the correct method. whenever you want to use bootstrap column classes such as col-xs-12 in your first parent, you must put the string class.

for 2: - this is true. way too accessories.

for 3: - the correct option.

for 4: - depends on the need for page design. if the whole site is in one container, then you can put it in the parent class.

+1
source

All the options you specify are correct.

However, the written structure below makes sense. This means that if you use col in container or container-fluid , it should be in row .

  <div class="container"> <div class="row"> <div class="col-*-*"> </div> </div> </div>

If you want to check how well your boot file is written, you can check it at http://www.bootlint.com/

+1
source

But I want to know where I should use nav / header / section / footer

Well, all of these fields are for semantic purposes only, in fact they can all be div . In the future or even now for SEO, it is better to use nav for navigation, footer for footer, etc. For example, header should be used to represent content; it often contains <h1> - <h6> .

There is a lot of information on the Internet, here is the link

All other bootstrap classes are just styles that you can apply yourself. For example, container can be used once for all your content, if you do not need a full-width element, but sometimes you have a situation when you need a full-width element (fe-image), then you do not want to wrap all your content in a container.

Here you want to use multiple containers, not one for everything (Fiddle)

Hope this helps you a bit.

-1
source

Source: https://habr.com/ru/post/1246613/

More articles:


All Articles