so strange behaviour I meet in bootply. I want to understand why I have this result with twelve column grid. This behaviour run with xs, sm, md, lg column type.
Perhaps for more understand grid system bootstrap 3...but I believed that 12 column all the time and type of column.
<div class="container-fluid">
<div class="row">
<div class="col-md-2 vcenter">
<span class="label label-primary">bla</span>
</div>
<div class="col-md-10 vcenter">
<p class="textPres">Ava "fefefeef
feeeeeeeeeeeeeeeeeeeeeeeeeeeeee
fggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggg
gggggggggggggggggggggggggggggggggggggggggggggggg
</p>
</div>
</div>
</div><!-- /.container -->
Bootply : Bootply
Related
I am new to Skeleton framework and am trying to build a two column layout for a blog project. So far this is what I have:
<section class="list-posts">
<div class="container">
<div class="row">
<div class="nine columns posts">
[NINE COLUMNS]
</div><!--nine columns-->
<div class="three columns aside">
[ASIDE]
[/ASIDE]
</div>
</div><!--row-->
</div>
but as more columns are added to the .posts class the aside collapses. Your help will be appreciated.
Not sure if I understand your problem, but if you are trying to nest columns you need to put a row div within the nine columns, and end the row(s) for every twelve columns.
If this is not the case, could you please provide a more specific clarification of your problem with a link or image.
Well after waiting for some hours without getting any help, i decided to get my hands dirty, this is what i did
<section class="content">
<div class="container">
<div class="row">
<!--LIST ALL THE POSTS HERE-->
<div class="twelve columns">
<div class='twelve'>
<div class='row single-entry'>
<div class='six columns'>
...
</div>
<div class='six columns'>
...
</div>
</div><!--row-->
</div><!--twelve-->
</div><!--row-->
<!-- ASIDE-->
<div class="four columns aside border-between">
<div class="row ">
<div class="twelve columns">
<div class="twelve">
<h4 class="standing">Recommendations</h4>
</div>
<div class="twelve columns recommended-articles">
<div class="three columns">
<img src="images/footer.png" class="u-max-full-width">
</div>
<div class="nine columns recommended-articles-details">
<h6 class="article-title">4 top SEO trends for 2017</h6>
<p class="author_name">Joel Orok</p>
</div>
</div>
</div>
</div>
</div>
</section>
I am looking to implement the following table where the name column uses two rows while age and location uses one. The text would be centered in their own row:
Is this bootstrap compliant? If so, how would you implement such a table?
Thanks.
Yep, you can nest rows and columns in bootstrap. The markup would look something like this.
<div class="container">
<div class="row">
<div class="col-sm-4">
<h1>Name</h1>
<div class="row">
<div class="col-sm-6">
<p>John Smith</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<p>Contractor</p>
</div>
</div>
</div>
<div class="col-sm-4">
<h1>Age</h1>
</div>
<div class="col-sm-4">
<h1>Location</h1>
</div>
</div>
</div>
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/
I have this:
<div class="row">
<div class="col-sm-8">
...
...
</div>
</div>
I want those 8 small columns to float in the middle of the available page width. If I add a col-sm-offset-2 but that just pushed everything right, even if there wasn't space. Advice?
If you encompass your row in a container, it should center everything. So that, with the col-sm-offset-2 should achieve what you want, e.g.
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
...
</div>
</div>
</div>
I have created following scaffold:
<div class="row">
<div class="col-md-4">
first column
</div>
<div class="col-md-4">
second column
</div>
<div class="col-md-4">
third column
</div>
</div>
Every column has background with 1px border. I would like to add margin-right: 15px to every column bot if applied, third column goes lower to the second `row`.
How can I set 15px space between columns ?
Short of modifying the bootstrap CSS directly (which may cause you problems later on updating to subsequent versions) I would recommend you place your own custom container within your columns (say with the class .foo) with a css statement specifying how you want it to display. For example
<div class="row">
<div class="col-md-4">
<div class="foo">
first column
</div>
</div>
<div class="col-md-4">
<div class="foo">
second column
</div>
</div>
<div class="col-md-4">
<div class="foo">
third column
</div>
</div>
</div>
with the CSS;
.foo:not(:last-child) {
margin-right:15px;
}
Example : http://cdpn.io/eDBCJ