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

Can you show us your project and explain what you expect it to look like versus how it is displaying instead?

Specifically, what do you mean by “which is as big as both of the side columns” in the following statement.

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

#4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

#6

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