Bootstrap 3.3.6 Grid Borders Do Not Provide a Rigid Structure

Question

I am trying to get to know Bootstrap and Grid. I am trying to create the following macro layout:

=================================================== | PageTitle |________________________| |________________________| +1 |________| img| img| | Make a choice. |_____|________|____|____| | | | =================================================== 

The main element is a jumbotron, inside which there is a line. Then I split the line into two <div> class="col-xs-12" elements each (I want the left panel to stay above the right one on the mobile device).

The left panel is divided into two lines with some text content.

The right panel contains a line divided into two parts. The left and right sections are class="col-xs-12 col-sm-3" . This is to ensure that on smaller screens each fits one on top of the other and fills the entire horizontal space. The row and subsequent substring of the column break up the space as shown.

Here is my code: Link

As you can see, the layout behaves as I would expect at xs (below 768px). However, with a larger size, the rows and columns in the right pane overlap, and the images disappear.

Any guide on understanding why the grid is not working as I expected (i.e., as a table that intelligently overpays at different screen sizes) will be appreciated!

Answer 1

The grid structure on the right panel of the small device seems to be wrong.

In the code snippet of your JSFiddle. On line 17 and 32 change class="col-xs-6 col-sm-3" to class="col-xs-6 col-sm-6" .

This will make the images appear again.

Updated:

Of course you can, you just need to change the approach you need to take in order to build, and any structure is possible. Check out this script . It shows the columns below the rows and rows by the structure of the columns so that they can be understood.

In your case, what you need to do is at the highest level, divide your structure into 4 columns and do whatever you want inside each column.

The easiest way to approach and understand any complex structure:

• First, determine how many columns your structure requires. The topmost one should always be split based on columns.

• Once the columns are defined, consider each column as a full-width page (ignoring the other columns for a while) and split again, etc.

Simple :-)

Answer 2

I apologize if the question I asked was not clear, but here is what I tried to do. I would like to hope that the answer to the question posed next to the question will help clarify:

HTML

 <div class="row"> <div class="col-xs-12 col-sm-5"> <h2> PageTitle. </h2> </div> <div class="col-xs-6 col-sm-1 text-center"> <h2> +1 </h2> </div> <div class="col-xs-6 col-sm-2"> <div class="statsbox"> <div class="statsbaryes"> </div> <div class="statsbarno"> </div> </div> </div> <div class="col-xs-6 col-sm-2 text-center"> <img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> </div> <div class="col-xs-6 col-sm-2 text-center"> <img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> </div> </div> 

CSS

 .statsbaryes { height: 30px; background-color: green; width: 20%; } .statsbarno { height: 30px; background-color: red; width: 80%; } .statsbox { height: 66px; right: 0px; width: 100%; border: 3px solid grey; } 

https://jsfiddle.net/z9jvnahd/

As mentioned in my comment on Nikhil, the problem arose because of my misunderstanding that I could have as many row / column section layers as I would like to structure the layout if there were 12 columns for each logical row on the screen. However, this is not the case, and the columns seem to have to be grouped together in a top-level row for correct recording - from my experiments.