CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
agis
agis

Reputation: 1841

proper usage of container-fluid in bootstrap

FIRST ISSUE:

Let's say I have a section in my website where I want to break the width of the container 1200px width. In this section I need to position an image on the very left side of the browser screen and on the right side some text.

I assume that in order to make this I have to use container-fluid and I'm using it like this:

<div class="container-fluid">
 <div class="row">
 <div> HERE IS THE CONTENT FOR IMAGE AND TEXT </div>
 </div>
</div>

When I check this in the browser:

It appears an horizontal scrollbar and I have to remove the negative margins of the .row class in order to get rid of the scrollbar.

Is this the normal way of doing this?

SECOND ISSUE:

Let's say I want to create a section where I want to have a full width background color and the content to be withing the default bootstrap grid width of 1200px.

Is it necessary to create an container-fluid in order to do this? Or is better just to create an extra div an add there the background color ?

Upvotes: 0

Views: 2648

Answers (2)

CodeTrooper
CodeTrooper

Reputation: 1888

In bootstrap you need the following structure: 

<div class="container-fluid">
     <div class="row">
         <div class="col-xx-xx">
                   ...content goes here...
         </div>
     </div>
</div>

The reason of this structure is that the container will try to grab and center the content, in the case of the .container-fluid, it grabs 100% width columns instead of the traditional ~960ish pixels that has been used.

The row will allow you to allocate 12 columns of content in the order you decide, which is the next div.

The class .col-xx-xx will allow you to specify the breaking point of that column, lg for large devices, md for medium devices sm and xs for mobile/tablet devices.

The second dual xx in .col-xx-xx will allow you to specify how many of the 12 columns you're going to take in that container. For Example, .col-lg-3 Will be a column who's breaking point is as large device (1200px or so) and it will take 3 column spaces.

So it is necessary to use the structure above, else you will have that scrollbar on the x-axis bothering.

EDIT

As for your second problem, it is really necessary that you use the structure given above in the code, you want it to be full width? that means, no margins and paddings, I have a small trick for that that I have been using for a while now, I'll explain it below:

Use a container with the class of jumbotron as follows: 

<div class="jumbotron my-own-jumbotron">
      ...content goes here
<div>

Since the jumbotron es designed to be responsive, it will act as a responsive container. on the next class, .my-own-jumbotron specify the background image or color you want for it, and depending on the content you add to it, it will adjust the size of it. I don't know if that's the solution you're looking for, but here's a demo:

https://www.hsoto.me/00295134567891srgsrgsrht36erdrbd5ye546/ipotra/

The third div will be a jumbotron with a custom background-image that expands as needed, and you can resize it and view it on a mobile device, and it is complete responsive, and full width.

I found that this way, it is not necessary to use the .container-fluid div.

Upvotes: 1

jme11
jme11

Reputation: 17374

In Bootstrap, the grid is defined by three components: the container, the row and the column(s). The container comes in two flavors: container, which sets the max-width of the container for each of the specific breakpoints defined in Bootstrap and centers the container within the viewport; and the container-fluid, which simply sets the width to 100% of the viewport display. Both the containers set the padding to 15px.

The purpose of the row is to contain the columns which float left by default, so it will automatically clear the float. It has a -15px margin to negate the padding added by the container.

The columns go inside your rows. Columns are based on a grid of 12. If you only need one column at the x-small breakpoint and up, then add one col-xs-12. Want two equal columns at that viewport width, add two col-xs-6. Columns have 15px of padding left and right, so there are always consistent gutters.

The row margins negating the container width may sound useless, but it's important and very clever, because it allows you to nest rows and columns inside other columns allowing you to create an endless combination of grid divisions.

So, your issue is that you're not using the grid the way it is designed. You must have at least one column inside a row inside a container.

Upvotes: 5

Related Questions