Questions and doubts about the bootstrap 3 Layout

Posted on

Question :

Hello, I’m starting now with the bootstrap and it’s my first contact with responsive layout. I’m trying to create something like this:

But I can not leave everything in place I can not do anything. Can anyone help me?

    

Answer :

You need a container, with rows and columns inside, would look something like:

<div class="container">
  <div class="row">
    <div class="col-md-2">ESQUERDA</div>
    <div class="col-md-6">centro</div>
    <div class="col-md-2">DIREITA</div>
  </div>
</div>

I suggest you read the official documentation, or In this version translated into Portuguese and slightly outdated . If you’d like a playground to test your code, you can use Bootply

Edit: To make the container fluid, change the container class to ‘container-fluid’.

    

The HTML structure looks like this:

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

<div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-7"></div>
        <div class="col-md-2"></div>
    </div>
</div>

Example: FIDDLE

Note: If you want to learn more about the Bootstrap grids system, this my other answer can help you.

    

Leave a Reply

Your email address will not be published. Required fields are marked *