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
Related
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>
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>
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
I am using Bootstrap v-3.0.2. And I faced an issue while using pull-right into div col class.
please have a look at following URL.Check both full screen and minimized view.
Bootstrap-3 issue
In Mobile-view both panels are merged. But it should be separate.
Both div panels class has grid axis value 12 (col-xs-12).
If I am try with different value it is working fine.
Is it a bug on bootstrap 3 ?
Use col-sm-push and col-sm-pull instead.
Also, you don't need to use col-md-6 and col-lg-6 if you want 50% width columns on any screens larger than xs...
<div class="container">
<!-- div's are merged.But It should be one after another -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Right Panel</h3>
</div>
<div class="panel-body">
Right Panel content
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Left Panel</h3>
</div>
<div class="panel-body">
Left Panel content
</div>
</div>
</div>
</div>
</div>
Bootply
I'm not sure why you would need to add .pull-right to the columns, but if you add .clearfix to the other column, it should resolve this issue.
I think you might get better results using the .col-xx-pull-x and .col-xx-push-x classes to accomplish the same thing. See the grid documentation "Column Ordering" section for more info on this.
I have some problems with column ordering after disabling responsiveness in Bootstrap 3.
<div class="row">
<div class="col-xs-9 col-md-push-3">...</div>
<div class="col-xs-3 col-md-pull-9">...</div>
</div>
If i do so, it affect layout on resolution below 1024 - blocks change places.
I've tried another solutions, like this one...
<div class="row">
<div class="col-xs-9 col-xs-push-3">...</div>
<div class="col-xs-3 col-xs-pull-9">...</div>
</div>
... and this one...
<div class="row">
<div class="col-md-9 col-md-push-3">...</div>
<div class="col-md-3 col-md-pull-9">...</div>
</div>
... and none of them work properly.
I just want to disable responsiveness and force col-9 block go first in HTML document and col-3 go after it at any resolution, but col-3 block (sidebar) must be aligned left and col-9 block (main content) must be aligned right.
Any suggestions?
Also read http://getbootstrap.com/getting-started/#disable-responsive and /or try maybe. https://github.com/bassjobsen/non-responsive-tb3. Using the col-xs-* classes seems right (cause they never stack). The xs grid don't have pull, push and offset classes.
Add an float right seems a solution in your case:
<div class="container" style="background-color:white;">
<div class="row">
<div class="col-xs-9" style="background-color:red;float:right;">Right</div>
<div class="col-xs-3" style="background-color:yellow;">Left</div>
</div>
<div class="row">
<div class="col-xs-9" style="background-color:green;">Right</div>
<div class="col-xs-3" style="background-color:blue;">Left</div>
</div>
</div>