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.
Related
I have a row class inside a col class using bootstrap 4 which looks perfect on desktop, but for mobile I want to force the row to be below it's parent row when the page is viewed on mobile. So technically I want to 'break out' of it's parent without changing the height of the parent. Here's an example of what I have currently on desktop:
And what I'm trying to achieve on mobile:
My code is just basic bootstrap with no additional CSS changes:
<div id="jumbo" class="row">
<div id="info" class="col-xl-6 col h-100">
<div class="row">
<div id="info-text" class="col offset-md-2">
<p class="display-4">Estate planning made easy</p>
<p>
Let’s get a clear plan in place for your money,<br>
property and other assets here and now.<br>
It’s never too early to protect what’s important<br>
to you and your family.
</p>
<p class="museo-sans-900">Get your free personalised report in just 20 minutes</p>
<button class="btn btn-brand-secondary">Start Now</button>
</div>
</div>
</div>
</div>
You can make two versions of the section. One like the first one and one like the second. Then put id=#desktop for the first and id=#mobile for the second . Then be sure to mark #desktop{display:none} for #media only screen and (max-width: (insert width of mobiles)), and #mobile{display: none} for min-width: (insert width of mobiles) . It s a long way, but if you don t find another easier way you can try this.
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 have some segments that are similar on my page, same setup - one icon-logo and one text-area:
<div class="row-fluid">
<div class="span7">
<img src="img/icon2.png" alt="" />
</div>
<div class="span4">
<h6>My Text Area</h6>
<p>Description of that functionality<br>
Multi lines of text<p>
</div>
</div>
Just basically an icon and a description text, started out with having 2 of these which is alright, now there is 8 and i think i would like to gather it in one segment, but then slide between the 8 icons/descriptions.
So my question is, any chance or any component available where i can put in 8 of these in a slider-effect way ? most sliders I've looked at is image sliders, but since i need to have multi-language i don't want to convert the 2 spans into 1 image.
I am not an expert in web development so an example would really be appreciated if its possible.
You can use bootstrap carousel for this.
This is the markup they expect
<div class="carousel-inner">
<div class="active item">[here]</div>
<div class="item">[here]</div>
<div class="item">[here]</div>
</div>
All you need to do is to have your two spans inside the element with class item.
Check this fiddle. Hope this is what you wanted.
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.