I'm currently reading a book about Bootstrap, Publications O'REILLY
It seems nesting a fluid grid is a little different: Since we are using percentages, each row resets the column count to 12. For example, if you were inside a Span8, instead of
two span4 elements to divide the content in half, you would use two span6 divs (see
Fluid Grid System | 5 Figure 1-4).
This is the case for responsive content, as we want the content to fill 100% of the container:
<div class="row-fluid">
<div class="span8">
level 1 of column
<div class="row">
<div class="span6">
Level 2
</div>
<div class="span6">
Level 2
</div>
</div>
</div>
</div>
My question is, why instead of using two span4 of span6 should we be content to fill 100% of the container?
Because grid span width is calculated based on the entire grid width, not the parent span of the element in question.
Imagine a scenario where you have 3 or 4 levels of nesting. width calculations would get very complex. By keeping everything relative to the grid's outer structure, both visualization and the CSS itself remain simplified.
Related
In Bootstrap, must all content- even just a basic block of text placed in the middle of a page for example, be placed inside columns and rows. My website seems to work just fine doing this:
<div class="container-fluid">
<h2>My Heading</h2>
<p>This Is Content On the page</p>
</div>
Yet, I have been told it should be like this:
<div class="container-fluid">
<h2>My Heading</h2>
<div class="row">
<div class="col">I'm content inside the grid</div>
</div>
</div>
Yet, on some of the templates on the bootstrap site itself, they don't always use columns and rows.
I'm really confused...
Thanks
No, not all content needs to be placed in .rows.
.rows and .cols simply provide you with a customizeable grid system (i.e.: number of columns, gutter sizes, responsiveness breakpoints are a few of the things one could customize) aimed at displaying content differently at various page widths. That (and also the division of the row in 12 columns) are what it was designed for.
The only purpose of rows and cols is to divide the space differently at different page widths and to provide some minor padding (gutters). If you don't need that for a part of your content, don't use it. Whenever you have a section which you want displayed according to your own custom rules, you can simply include and style it as you want.
So, for example, this is perfectly valid and can be seen in various Bootstrap examples:
<div class="container">
<div class="row">
<div class="col">
... normal layout cols here
</div>
</div>
<div>
your custom stuff here. you need to provide responsiveness CSS rules for this content.
Out of the box, being a `<div>`, this will fill all the available width
if, for example, it was included in a `.container-fluid`,
it would span the entire browser window, at all screen widths.
</div>
<div class="row">
<div class="col">
... more normal layout here...
</div>
</div>
But whenever you want to use .cols, you should place them as direct children of .rows. If you do not, you will see some nasty horizontal scrollbars across your content, because the grid has a system of negative margins and (positive) padding to cater for gutters at various width sizes.
With this basic example everything works fine, especially when the heading is centered. Using different approach for Bootstrap grid is usually not a good idea.
From Bootstrap docs:
In a grid layout, content must be placed within columns and only
columns may be immediate children of rows.
As alignment problems will occur in the long run.
Secondly when you start using SASS with Bootstrap and change grid variables then everything stays aligned and is controlled from
one place.
In your example if you want to align the heading you need to add a margin-left so that is would be aligned with I'm content inside the grid.
Look at this example how everything is aligning with and without rows/columns: https://codepen.io/LaCertosus/pen/KKKzVqR
<div class="container-fluid mt-5">
<div class="row">
<div class="col">
This text is inside <b>row</b> and <b>col</b>
</div>
</div>
<div class="row">
This text is only inside <b>row</b>
</div>
<div class="col">
This text is only inside <b>col</b>
</div>
<div>
This text is only <b>container</b>
</div>
</div>
<div>
This text is outside <b>container</b>
</div>
It is the right question to ask why I have to generate so much boilerplate but it will come out in the long run when elements need to align and scale in different screen sizes.
I have a table which takes the whole screen width. In each table row, there is a Bootstrap 3 grid within a panel.
The problem is that the table column is too thick to contain my Bootstrap grid, and the result is this :
Here we see that the last button is overlapping the table row, going too far. But if I switch to my 24" monitor, there is no longer this problem since the screen is wider and therefore the table rows are wider too. It's the same if I remove some table rows, they will be wider and it will not overlap.
So my question is : is there a way to have a dynamic and fluid grid system which would automatically arrange the Bootstrap grid so it would not overlap ?
Here is a Codepen to illustrate the problem : codepen.io/anon/pen/BKZaWe
I would like the panels to have two buttons per row instead of crushing four together, but if we enlarge the table or remove some panels then it would show 3 or 4 buttons per row.
Have you tried: http://getbootstrap.com/css/#grid-example-fluid?
<div class="container-fluid">
<div class="row">
...
</div>
</div>
EDIT
I think I understand now (really hard from such a small screen shot and no code example).
The button(s) is wider than the column when in narrow viewports and you want that column only to remain wider.
Unfortunately, not how it's designed. Each column is a particular % of the full container width - nothing to do with the columns' content.
Depending on your browser support, Flexbox is the perfect solution here.
Otherwise, you will have to do something like:
<div class="col-sm-6 col-md-4"> <span> col 1 with buttons <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 2 <span> </div>
<div class="col-sm-3 col-md-4"> <span> col 3 <span> </div>
To force the first column wider for the sm viewport.
two ways you can do it
1.give just call table responsive class for the table.
2.create an table using div with display: table, display: table-row, display: table-cell properties
http://www.html-cleaner.com/
I think it will do the trick for you.
Else share the code then i can look in deep into it
http://www.razaprinters.com/bootstrap.html
Hi I have made this page using bootstrap it is working fine on Desktops i am mostly using classes like col-xs-4 or 12 but when i open my website on a cellphone it is not optimizing things are behaving awkwardly like the about us divs goes all the way up and etc. any help with the code will be helpful i am not posting the code as you can go to inspect element or view source code to access it.
In order for bootstrap to "work" you should put your columns inside container and row classes.
<div class="container">
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
For more information go here Bootstrap Grid System
Container is a parent to content you want to style, it can have multiple rows inside. A row is sort of horizontal group (like a row in a table). Rows have 12 columns, but you can apply different widths to elements to target different views (dektop, mobile) depending on screen width. You need a row element if you want columns to work. For instance if you use:
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>
</div>
Then this will take 50% width (it will be on the left) of parent .container element on larger screens and 100% width of parent .container on smaller screens. Hope that clarifies something. I really recommend reading Bootstrap documentation - it's short and simple.
I am using Unsemantic CSS Grid framework to create a layout that looks something like this (simplified to make question clear):
What you are looking at here is 3 rows, each with 2 columns. The code looks roughly like this:
<!-- First row -->
<div class="grid-50">
Title 1
</div>
<div class="grid-50">
Title 2
</div>
<div class='clear'></div>
<!-- Second row -->
<div class="grid-50">
<img src='image1.png' />
</div>
<div class="grid-50">
<img src='image2.png' />
</div>
<div class='clear'></div>
<!-- Third row -->
<div class="grid-50">
Text paragraph here
</div>
<div class="grid-50">
Another paragraph of text
</div>
<div class='clear'></div>
The great thing about using 3 rows is that even if image 1 and image 2 are not the same height, the paragraph of text below them lines up across the two columns (meaning it starts at the same vertical position in both columns) since I use a 'clear' after the images. If I had instead used 1 single row with 2 columns, where each column is a div that has a title, image and paragraph text one on top of the other, then the paragraph text would not line up if the images had different heights. So using 3 rows gives me exactly what I am looking for.
Unfortunately when viewed on a mobile device this is what happens:
This is because the two columns of each row end up on top of each other.
What I would instead like to get is this:
In other words, I want row1col1, row2col1 and row3col1 to stick together, and then row1col2, row2col2 and row2col2 to appear below.
How do I go about doing this? Is there anything in Unsemantic that allows me to "tie" a column together.
If I instead create 2 divs with title,image and text para, and put them in 1 row, that will solve this issue, but then the text paragraphs will NOT line up if the images are different heights. I cannot hard code the height because this is a fluid layout, and when the width of the page changes the width of the columns will change, which in turn will change the width of the images (since their width is set to 100% of container) and consequently their heights will change. Any tricks, workarounds or suggestions to get this approach working would be most helpful.
As a last resort I am thinking of using jQuery to position the paragraph text on page resize; if you feel that is a good solution (or the only solution) please feel free to share any recommendations or pitfalls to watch out for in this approach.
Bootstrap has a 12 column grid and when you exceed the columns with your content, the content wraps (example below).
<div class="row-fluid">
<div class="span6">
<p>foo</p>
</div>
<div class="span6">
<p>bar</p>
</div>
<div class="span6"> <!-- the extra content which will wrap -->
<p>baz</p>
</div>
</div>
I would like the content to stay on the same line and overflow (essentially i am designing a matrix and wrapping does not work well with matrices). I have looked at floating the child elements (span6s) and setting the overflow to auto on row-fluid, but that does not work.
Are there any possible solutions to this?
Yes, you need to make sure your "span-count" does not exceed 12. In your case when you have 3 columns you should use "span4" instead of "span6".
See http://twitter.github.io/bootstrap/scaffolding.html#gridSystem for details. The Grid is designed around 12 columns and while you can have less it will misbehave if you have more. If you like to have more you would have to override the CSS classes for spanX to make sure the total width does not exceed 100%.