CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
elize
elize

Reputation: 425

Bootstrap3: what is standard Structure and Layout?

There is a lot of tutorial about bootstrap elements.

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

for example..Do it needs use row for column 12?

1- currently I do it this way:

<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>

Is it true?

2- Is this format true or necessary?

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

3- which one 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 it need use "container" class for all section or only for parent section?

Upvotes: 5

Views: 503

Answers (3)

Nizam Kazi
Nizam Kazi

Reputation: 1920

All options you mentioned are correct.

However, below written structure makes sense. That means if you are using col in container or container-fluid it should be in row.

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

If anytime you want to check how well your bootstrap is written, you can check it on http://www.bootlint.com/

Upvotes: 1

Roman
Roman

Reputation: 3941

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

Well all these fields are only for semantic purpose, actually they all could be div. In the future or even now it is best practise for SEO to use nav for navigation, footer for the footer etc. For example header should be used to introduce content, it often contains <h1> - <h6> tags.

There are many informations to this in the web, here is a reference

All the other bootstrap classes are just styles which you could apply by yourself. A container for example can be used once for all of your content if you never need a full width element, but sometimes you have a situation where you need a full width element (f.e. an image) then you dont want to wrap all of your content into container.

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

Hope this helps you a bit.

Upvotes: -1

Yashpal Sindhav
Yashpal Sindhav

Reputation: 375

for 1:- yes it's a correct method. whenever you want to use bootstrap column classes like col-xs-12 in their first parent you must put class " row ".

for 2:- this is true. method also accessory.

for 3:- first option is correct.

for 4:- depends of need of page design. if all site are in same container with then you can put it in parent class.

Upvotes: 1

Related Questions