Help on my first page with Bootstrap!

1

Hello everyone,

Im looking at a page, and Im completely new to Bootstraps.
I want to create columns in a fixed container.
I need to have a picture centered in the middle column which is as big as both of the side columns.
But I just don´t succeed. I think Im missing something. Thank you in advance.
So now I have:

<div class="row">
      <div class="col-xs-2">
      </div>
      <div class="col-xs-8">
      <div class="picture">
     //<img src>
</div>
</div>
 <div class="col-xs-2">
  </div>
  </div>
3

Hi Mina!

I’m super new to this, but hope my advice helps.

You need to wrap your entire section in a .container.

.container-fluid works well, because it fills up the page/screen width.

Also: your columns are 2 tiny ones on the side (col-xs-), while your middle column is 4 times the size of each of those. And you have 1 too many divs (the “picture” div is unnecessary.)

This would work:

<div class="container-fluid">
  <div class="row">
      <div class="col-xs-4">
      </div>
      <div class="col-xs-4">
     //<img src... >
      </div>
      <div class="col-xs-4">
      </div>
    </div>
 </div>

Side note:
I prefer to use “sm” instead of “xs”, because it seems to cover all bases re. responsiveness.

Good luck! :slight_smile:

6

Thank you! Every bit of advice helps (especially a n00b like me).