Using the Gumby Framework I'm encountering issues nesting divs.
I'm trying to nest a three and seven column grid within a ten column grid.
I've tried a few variations with my HTML/CSS to no avail. Figure I must be missing something fairly simple.
Site Link
HTML code example:
<div class="ten columns main_col">
<p>Text removed</p>
<div class="row">
<div class="three"><h2 class="100width">Core Services</h2></div>
<div class="seven"></div>
</div>
</div>
The framework isn't "smart". Everything is based on 12 or 16 columns. So you've got to do all the thinking for things of this nature. If you want a 3-7 centered container within a 12 column grid, the following code does just that:
<!-- 10 Columns -->
<div class="row">
<div class="three columns push_one">3 col</div>
<div class="seven columns">7 col</div>
</div>
<!-- // End 10 -->
Here's why: 10 columns = 10 of 12(for argument's sake), 3 columns and 7 columns within that container are actually a 30% of 12 column next to a 70% of 12 column residing inside a 83.333% of 12 column container. Throwing class="ten columns" on the container doesn't fire some kind of recursive function to "reset" the container as a 10 column grid system; thus, the goofy margins, padding, etc. It's actually working as expected. Hope that makes sense.
Related
The image in the 2nd column keeps stacking below the first column and not on the right side of the page. Ive been staring at this for two hours now. I'm using codepen so I have bootstrap preloaded in the background.
http://codepen.io/OfeyDofey/pen/KaLjeG/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h3>George Washington</h3><br>
<h3>Montana State Quarter</h3><br>
<h3>Ohio State Quarter</h3><br>
</div>
<div class="col-md-12">
<img src="http://i.imgur.com/YzO3IvA.jpg" class="QC">
</div>
</div>
</div>
</div>
You need to change col-md-12 to col-md-6.
Bootstrap grid works on 12 columns.
Found two bugs.
Grid system is 12 col wide, currently in your code it is 24 cols wide, use -6 instead of -12.
Add 'display:inline;' property to your 'h3{ }' in order to display them inline.
I am working with Slim to render some elements with Bootstrap, I'm trying to render pairs of columns inside a row container, as follows:
<div class="row">
<div class="col-xs-6">
Container 1 - Left
</div>
<div class="col-xs-6">
Container 2 - Right
</div>
</div>
<div class="row">
<div class="col-xs-6">
Container 3 - Left
</div>
<div class="col-xs-6">
Container 4 - Right
</div>
</div>
The objective is to render these columns correctly regardless of the height of them.
The slim code that I am trying to use is the following:
- [1,2,3,4].each_with_index do |num, index|
.row # I want this row to appear only on odd iterations
.col-xs-6 Container #{num} - #{index % 2 == 0 ? "Left" : "Right"}
Is there an elegant way to do it?
I've thought of:
Having a single row and after 2 columns, add a page break of a .col-xs-12 column.
Getting the n and n+1 items and render them on a single loop.
The question goes:
Is there a way to render the container once and then add a child on a later iteration?
I'm trying to make a simple Advent calendar using Bootstrap ('tis the season).
I'm nesting 7 columns per row for the 7 days of each week.
<div class="container-fluid">
<div class="row title">
<div class="col-xs-12"><p>Advent Calendar</p></div>
</div>
<div class="row weekdays">
<div class="col-xs-1"><p>Mon</p></div>
...
<div class="col-xs-1"><p>Sun</p></div>
</div>
<div class="row dates">
<div class="col-xs-1"><p>30</p></div>
<div class="col-xs-1"><p>1</p></div>
...
<div class="col-xs-1"><p>6</p></div>
</div>
</div>
See this fidlle for result.
Unfortunately, the total size the columns exploit is 7/12, not 12/12: they aren't using the full width of the viewport.
Isn't bootstrap supposed to take care of proportions? How can I make them use 100% of the width?
use this tool for customizing your bootstrap
http://getbootstrap.com/customize/#grid-system
in grid system section you can set 14 for #grid-columns instead of 12, then yor customized bootstrap will be 14 columns and then use col-xs-2 instead of col-xs-1 in your html code for each day, then you have full page width for your calendar.
inside a div containing class span9 there are 3 child div containing span4 class, which proves it is possible to make row of 12 columns inside 9 columns. Even this 12 columns does not cover the 100% width of 9 columns.
<div class="span9">
<div class="span4 col-sm-offset-2" id="uniform-requiredMonth">
<span>June</span><select name="data[User][dob][month]" id="requiredMonth" class="span3 text" style="opacity: 0;">
</select>
</div>
<div class="selector span4 col-sm-offset-2" id="uniform-requiredDay"><span>8</span><select name="data[User][dob][day]" id="requiredDay" class="span3 text" style="opacity: 0;">
</select>
</div>
<div class="selector span4 col-sm-offset-2" id="uniform-requiredYear"><span>2015</span><select name="data[User][dob][year]" id="requiredYear" class="span3 text" style="opacity: 0;">
</select>
</div>
</div>
it does not make sense to me. Any help will be appreciated. Thanks in advance.
Layoutit code generator
Use the above code generator which will give you an easy way to nest columns. Start by deleting the Hello World jumbotron, then add a 6 6 grid(from the grid system side menu) then a nested 4 4 4 grid in each. The downloadable output code will show the nesting which is easy to see. Note the clearfix tags are just clearing any floating commands used in surrounding code, the grid divisions menu choices(in the side bar itself) can be over written ie the 2nd one down is 6 6 so just delete them and add 3 3 3 3 (with space as the divider), if you then add this to the two 6's as initially given above you end up with 8 columns of 1.5 width great.
Also in Chrome browser, you can right click and inspect elements (CTRL+Shift+I) and see padding and margins in a diagram on the right hand side which I find very cool.
This question already has answers here:
Changing number of columns dynamically in Bootstrap grids
(2 answers)
Closed 9 years ago.
When using Bootstrap's fluid grid, is it necessary to declare a column when you want the content to span the entire width of the row. In other words, is this sufficient
<div class="row-fluid">
This column should span the full width of the row
</div>
Or is it really necessary to do this (as the docs suggest):
<div class="row-fluid">
<div class="span12">This column should span the full width of the row</div>
</div>
Also, when I want to nest columns in a fluid grid, according to the docs
Nesting with fluid grids is a bit different [to a non-fluid grid]: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.
The docs then go on to give this example where the first row is one full-width column and the second row has 2 half-width columns
<div class="row-fluid">
<div class="span12">Fluid 12
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
Apart from the class name of the rows, I don't see how this is at all different to a non-fluid grid. Also, this example seems to contradict the statement
the number of nested columns should not match the parent's number of columns
Because last time I checked 6 + 6 = 12. Can someone improve on this explanation?
(1) I don't see how this is at all different to a non-fluid grid
It uses percentages
(2) the number of nested columns should not match the parent's number of columns
Well, bad example, what they simply mean is that the number in the class names should always add up to 12, regardless of what they are nested in.
This is correct:
<div class="row-fluid">
<div class="span6 row-fluid">
<div class="span4"> </div>
<div class="span4"> </div>
<div class="span4"> </div>
</div>
</div>
instead of this, which is wrong:
<div class="row-fluid">
<div class="span6 row-fluid">
<div class="span2"> </div>
<div class="span2"> </div>
<div class="span2"> </div>
</div>
</div>