Customizing Twitter Bootstrap Grid Does Not Work

Twitter Bootstrap grid not working as expected

This is because of the way the grid works with rows and spans, specifically this rule in Bootstrap's CSS:

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

Hence why adding the content at the beginning means that the other span* elements get margin before them. The searchSection is full width, hence the first span4 wraps to the next line and has margin. Assuming you want the search section full width, the safe way to go would be to put another row-fluid around the span4s:

    <div class="searchSection redBorder" style="height: 100px;">
        SEARCH SECTION
    </div>

    <div class="row-fluid">
        <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                BLOG
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                RECIPE
            </div>
        </div>

         <div class="span4 redBorder">
            <div class = "contentPlaceholder">
                LISTING
            </div>
        </div>
    </div>

</div> <!-- END OF MAIN CONTENT -->

This is also sort-of explained in the nesting columns section in the docs, http://twitter.github.com/bootstrap/scaffolding.html#gridSystem.

Customizing the Twitter Bootstrap default grid

Open up variables.less it contains all of the variables you need to change near the bottom:

@gridColumns:             16;
@gridColumnWidth:         45px;
@gridGutterWidth:         16px;

Make sure you are loading the less and not the css

Bootstrap grid layout is not working?

A few things:

1. Both of your columns are wrapped in row elements, which clear the floated column divs.

2. Is the path to your css file correct? If it is in a 'css' folder, you probably want:

   <link href="/css/bootstrap.min.css" rel="stylesheet">
   

Same would go for your bootstrap javascript file.

Also, you probably want to take another look at the bootstrap grid system: http://getbootstrap.com/css/#grid

The 'container' class would probably be the outermost element. Only columns can be immediate children of rows.

<div class="container">
    <div class="row">
        <div class="col-md-3 engineering well">
            <img src="xyz" />
        </div>
        <div class="col-md-3">
             <img src="xyz" />
         </div>
    </div>
</div>

Bootstrap Columns Not Working

Try this:

DEMO

<div class="container-fluid"> <!-- If Needed Left and Right Padding in 'md' and 'lg' screen means use container class -->
            <div class="row">
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="#">About</a>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <img src="image.png" />
                </div>
                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                    <a href="#myModal1" data-toggle="modal">SHARE</a>
                </div>
            </div>
        </div>

bootstrap grid not working as expected

You are having float clearing issues. Add this after the 6th column div:

   <div class="clearfix visible-md"></div>

You can add more visible instance if you are having the same problem on other viewports:

   <div class="clearfix visible-sm visible-md"></div>

More info: Responsive column resets: http://getbootstrap.com/css/#grid

Twitter bootstrap grid issues - Items overflow container when downscaling window size using responsive

Have have add your code here: http://bootply.com/66598

The image below show your problem / question (i think):

To understand your problem you will have to study the grid and
understand the difference between the default grid and the fluid grid,
see: http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

Your problem will happen on screens bigger as 767px width. Below this
width columns (div with class="span{x}") will stack. On big screens
the problem will don't happen also.

The default grid (Twitter's Bootstrap 2.x):

When nesting rows the child row gets a total span which sum up to the
span of its parent.

Example:

<div class="row">
<div class="span6">
<!--nesting-->
    <div class="row">
    <div class="span3"></div>
    <div class="span3"></div>
    </div>
</div>
<div class="span6">
</div>
</div>

In the grid the span classes have a fixed width in pixels (depending
on screen width), see:

Between 768px and 980px screen width:
Every span1 will be 940 - (11 gutters of 20px) /12 = 60px
(above the 980px (1170-11*30)/12 = 70px).

Now your problem you have set: <input type="text" class="input-medium search-query">
The .input-medium will give this input a fixed width of 150px and the
"search" button take also space (75px;).
You put this in a span2 (<div class="input-append span2">) witch is
in a span 3 (<div class="span3 offset9">).
On the default 940 grid a span3 got a width of 3x60 + 2x20 = 220px;
while your seachbox takes 75+150 = 225px. For this reason your
searckbox breaks out of the grid.
A span4 won't have this problem. Of course it will also breaks out your
span2.

The fluid grid (Twitter's Bootstrap 2.x and Twitters Bootstrap 3):

In the fluid grid every column (span{x}) of get a percentage of the
width of it's parent. When nesting the child row can be split in
12 columns again.

Example:

<div class="row-fluid">
<div class="span6">
<!--nesting-->
    <div class="row">
    <div class="span6">50% of the parent and 25% of the grid</div>
    <div class="span6">50% of the parent and 25% of the grid</div>
    </div>
</div>
<div class="span6">
    <div class="row">  
    <div class="span12">100% of the parent and 50% of the grid</div>
    </div>
</div>
</div>

In your case your searchbox is nested in a span2 in a span3.
The span3 will get about 25% of the grid width. When 25% of your grid
width will be smaller as 225px the searchbox will break out the grid.
So your problem will start around a screen width of 4 x 225 = 900px
(just below the default grid of 940 pixels).
Also here it will help to put your searckbox in a span 4 or 5.
NOTE <div class="input-append span2"> will have a width 16,6% of 25%
of the grid (very small).

Possible solution: Use a pull-right class for your searchbox:

  <div class="row-fluid">
    <div class="span3 offset9">
        <form class="form-search">

                <div class="input-append pull-right">
                    <input type="text" class="input-medium search-query">
                    <button type="submit" class="btn btn-info"><i class="icon-search icon-white"></i> Search </button>
                </div>

        </form>
    </div>
</div>

Bootstrap grid won't work using xs columns

The pen is using Bootstrap 4, and the CSS class names have changed. The xs infix has been removed in 4.x...

col-xs-offset-3 is now offset-3
col-xs-6 is now col-6

  <div class="container-fluid">
    <div class="row">
      <div class="offset-3 col-6">
      <h1>FFC Calculator</h1> 
      </div>
    </div>
  </div>

http://codepen.io/anon/pen/JNyqWX

---

Related Topics