How to add margin top to class="row" elements using twitter bootstrap framework?
Editing or overriding the row in Twitter bootstrap is a bad idea, because this is a core part of the page scaffolding and you will need rows without a top margin.
To solve this, instead create a new class "top-buffer" that adds the standard margin that you need.
.top-buffer { margin-top:20px; }
And then use it on the row divs where you need a top margin.
<div class="row top-buffer"> ...
Ok just to let you know what's happened then, i fixed using some new classes as Acyra says above:
.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }
whenever i want i do <div class="row top7"></div>
for better responsive you can add margin-top:7% instead of 5px for example :D
Bootstrap 3
If you need to separate rows in bootstrap, you can simply use .form-group. This adds 15px margin to the bottom of row.
In your case, to get margin top, you can add this class to previous .row element
<div class="row form-group">
/* From bootstrap.css */
.form-group {
margin-bottom: 15px;
}
Bootstrap 4
You can use built-in spacing classes
<div class="row mt-3"></div>
The "t" in class name makes it apply only to "top" side, there are similar classes for bottom, left, right. The number defines space size.
For Bootstrap 4 spacing should be applied using
shorthand utility classes
in the following format:
{property}{sides}-{size}
Where property is one of:
m - for classes that set margin
p - for classes that set padding
Where sides is one of:
t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
l - for classes that set margin-left or padding-left
r - for classes that set margin-right or padding-right
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element
Where size is one of:
0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto
So you should be doing any of these:
<div class="row mt-1">
<div class="row mt-2">
...
<div class="row mt-5">
Read the docs for more explanation.
Try live examples over here.
Sometimes margin-top can causes design problems:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
So, i recommend create "margin-bottom classes" instead of "margin-top classes" and apply them to the previous item.
If you are using Bootstrap importing LESS Bootstrap files try to define the margin-bottom classes with proportional Bootstrap Theme spaces:
.margin-bottom-xs {margin-bottom: ceil(#line-height-computed / 4);}
.margin-bottom-sm {margin-bottom: ceil(#line-height-computed / 2);}
.margin-bottom-md {margin-bottom: #line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(#line-height-computed * 2);}
I added these classes to my bootstrap stylesheet
.voffset { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }
Example
<div class="container">
<div class="row voffset2">
<div class="col-lg-12">
<p>
Vertically offset text.
</p>
</div>
</div>
</div>
I'm using these classes to alter top margin:
.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }
When I need an element to have 2em spacing from the element above I use it like this:
<div class="row margin-top-20">Something here</div>
If you prefere pixels so change the em to px to have it your way.
You can use the following class for bootstrap 4:
mt-0
mt-1
mt-2
mt-3
mt-4
...
Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/
Bootstrap 4 alpha, for margin-top: shorthand CSS class names mt-1, mt-2 ( mt-lg-5, mt-sm-2)
same for the bottom, right, left, and you have also auto class ml-auto
<div class="mt-lg-1" ...>
Units are from 1 to 5 : in the variables.scss
which means if you set mt-1 it gives .25rem of margin top.
$spacers: (
0: (
x: 0,
y: 0
),
1: (
x: ($spacer-x * .25),
y: ($spacer-y * .25)
),
2: (
x: ($spacer-x * .5),
y: ($spacer-y * .5)
),
3: (
x: $spacer-x,
y: $spacer-y
),
4: (
x: ($spacer-x * 1.5),
y: ($spacer-y * 1.5)
),
5: (
x: ($spacer-x * 3),
y: ($spacer-y * 3)
)
) !default;
read-more here
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
Add to this class in the .css file:
.row {
margin-left: -20px;
*zoom: 1;
margin-top: 50px;
}
or make a new class and add it to the element
.rowSpecificFormName td {
margin-top: 50px;
}
If you want to change just on one page, add the following style rule:
#myCustomDivID .row {
margin-top:20px;
}
In Bootstrap 4 alpha+ you can use this
class margin-bottom-5
The classes are named using the format: {property}-{sides}-{size}
just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
.small-top
{
margin-top: 25px;
}
</style>
<div class="row small-top">
<div class="col-md-12">
</div>
</div>
Bootstrap3
CSS (gutter only, without margins around):
.row.row-gutter {
margin-bottom: -15px;
overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
margin-bottom: 15px;
}
CSS (equal margins around, 15px/2):
.row.row-margins {
padding-top: 7px; /* or margin-top: 7px; */
padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
margin-top: 8px;
margin-bottom: 8px;
}
Usage:
<div class="row row-gutter">
<div class="col col-sm-9">first</div>
<div class="col col-sm-3">second</div>
<div class="col col-sm-12">third</div>
</div>
(with SASS or LESS 15px could be a variable from bootstrap)
<div class="row row-padding">
simple code
There is a trick for adding margin automatically only for the 2nd+ row in the container.
.container-row-margin .row + .row {
margin-top: 1rem;
}
Adding the .container-row-margin to the container, results in:
Complete HTML:
<div class="bg-secondary text-white">
div outside of the container.
</div>
<div class="container container-row-margin">
<div class="row">
<div class="col col-4 bg-warning">
Row without top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
<div class="row">
<div class="col col-4 bg-primary text-white">
Row with top margin
</div>
</div>
</div>
<div class="bg-secondary text-white">
div outside of the container.
</div>
Taken from official samples.
you can add this code :
[class*="col-"] {
padding-top: 1rem;
padding-bottom: 1rem;
}
Just simply use this bs3-upgrade helper for spacings and text aligment...
https://github.com/studija/bs3-upgrade
If you're using BootStrap 3.3.7, you can use the open source library bootstrap-spacer via NPM
npm install bootstrap-spacer
or you can visit the github page:
https://github.com/chigozieorunta/bootstrap-spacer
Here's an example of how this works to space rows using the .row-spacer class:
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
<div class="row row-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
If you'd require spaces between columns, you can also add the .row-col-spacer class:
<div class="row row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
And you can also combine various the .row-spacer & .row-col-spacer classes together:
<div class="row row-spacer row-col-spacer">
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
Bootstrap 5
In Bootstrap 5 you could do something like this:
<div class="row mt-X"></div>
where X is a number from 0 (no space) to 5 (a lot of space). For more information on the different margin/padding sizes and the breakpoint specific control, please have a look at the docs.
My trick. Not so clean, but works well for me
<p> </p>
Related
I've got the following HTML structure which I'm trying to style using CSS selectors only:
<footer>
<div class="row">
<div class="col-md-3"></div>
<nav class="col-md-9"></nav>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
</div>
</footer>
Imagine all the columns are stacked in a small viewport.
I want all columns except for the very last one to apply a margin-bottom to space the columns.
I've tried some different approaches, but to no avail:
footer [class^="col-"]:not(:last-child) {
margin-bottom: 3rem;
}
footer [class^="col-"]:not(:last-of-type) {
margin-bottom: 3rem;
}
First, why do these fail? Second, what's the right approach here?
First use footer > div.row > * to apply the margin-bottom 3rem, then use footer > div:last-child > div:last-child ( or footer > div.row:last-child > div:last-child, won't make a difference) to reset the last margin to 0:
(note: I only used the .wrap div to apply a backgroun in order to make the margins (and the "no-margin" on the last element) visible)
.wrap {
background: #ccc;
}
footer > div.row > * {
margin-bottom: 3rem;
background: #dff;
}
footer > div:last-child > div:last-child {
margin-bottom: 0rem;
}
<div class="wrap">
<footer>
<div class="row">
<div class="col-md-3">Content 1</div>
<nav class="col-md-9">Content 2</nav>
</div>
<div class="row">
<div class="col-md-3">Content 3</div>
<div class="col-md-9">Content 4</div>
</div>
</footer>
</div>
I would suggest styling them all, then removing the margin on the last one, like so:
footer [class^="col-"] {
margin-bottom: 3rem;
}
footer .row:last-child [class^="col-"]:last-child {
margin-bottom: 0; // or however much
}
If using last-of-typeis beneficial in any way, then by all means use that, but it should be equivalent if you're implementing Bootstrap (which your class names suggest).
I have two divs :
<div class="row">
</div>
<div class="row">
</div>
I need to fix the first one while scrolling. I did this :
<div style="position:fixed" class="row">
</div>
Now the divs are overlapping : https://jsfiddle.net/DTcHh/22068/
How can I solve this ?
HTML:
<div class="row fixed"></div>
<div class="row padding"></div>
CSS:
.fixed {
position: fixed;
background: #fff;
z-index: 10;
width: 100%;
}
.padding {
padding-top: 54px // height of your fixed row, you have to change this value on different screen sizes (using media queries)
}
JSFIDDLE
I am trying to understand how it works.
I made columns and put <hr> inside just for an illustration.
Here's what I have tried so far:
Row margin left and right -15px.
Columns padding left and right 15px.
Widths, same to bootstrap's.
Columns are floated left.
I don't understand why mine is not working? For example, 4 columns would only have 3 columns then the other one would go to the bottom. Widths are correct. I am a bit frustrated.
Edit:
HTML
<div class="row">
<div class="column">
<hr>
</div>
<div class="column">
<hr>
</div>
<div class="column">
<hr>
</div>
</div>
CSS
.row {
margin-left: -15px;
margin-right: -15px:
}
.column {
padding-left: 15px;
padding-right: 15px;
float:left;
width: 33.33333%
}
Yours doesn't work like Bootstrap because Bootstrap uses border-box sizing. To make yours work the same use..
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.row {
margin-left: -15px;
margin-right: -15px:
}
.column {
padding-left: 15px;
padding-right: 15px;
float: left;
width: 33.33333%
}
http://www.codeply.com/go/BnMCZvKZ5N
Not sure what you want to acomplish, but it seems like you want 3 colums?
Try this:
<div class="row">
<div class="col-md-4">
1 / 3
</div>
<div class="col-md-4">
2 / 3
</div>
<div class="col-md-4">
3 / 3
</div>
</div>
Little explenation:
col-md-12 is one column
so if you want 2 columns you do col-md-6 (twice, and always bewteen a row class)
and it works the same with everything else
try reading this:
http://getbootstrap.com/css/#grid
Hey I am having the following html code :
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
and in my css:
.foo {
background-color: white;
}
I can't add some margin between them as they are taking the full width due to bootstrap. Though I would like to add a separator between them (10px or so) with no background-color. How can I achieve this (I have to use bootstrap for other reasons).
You can edit the alignment of the col margins, and offset with padding:
Demo Fiddle
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
.foo {
background-color: white;
}
#media (min-width: 768px) {
.foo:first-of-type {
margin:0 5px 0 -5px;
padding-left:20px;
}
.foo:last-of-type {
margin:0 -5px 0 5px;
padding-right:20px;
}
}
body {
background:black;
}
Add another div width a col size of 1 and a width of 10px and no background. Change the column width of the others as needed.
Bootstrap columns have 15px padding by default, so could you wrap your foo class in a column? For example:
<div class="col-sm-7">
<div class="foo"></div>
</div>
<div class="col-sm-5">
<div class="foo"></div>
</div>
Then you have your foo divs with white background and 15px of padding (and no background color).
http://jsfiddle.net/3cz3zy3k/
Just put your background color on a child of the column rather than the column itself. In my experience it's best to avoid modifying grid elements in general.
.foo {
background-color: pink;
}
<div class="container-fluid">
<div class="row">
<div class='col-xs-7'><div class='foo'>...</div></div>
<div class='col-xs-5'><div class='foo'>...</div></div>
</div>
</div>
Demo
I would to create something like this using the 960 grid, is it possible using the framework or do i have to do some custom work?
960.gs and other CSS Frameworks use the padding and margins, all you have to do is to override them
this is the normal code
<div class="span-18">
<div class="span-4 last">
</div>
</div>
use something like
<div class="span-18 cut-margin">
<div class="span-4 last cut-margin">
</div>
</div>
and
.cut-margin { margin-right: 0 !important; }
and set the new width of your elements to the element + the margin/padding you are using.
You can always create your own bigspan classes, for example:
.bigspan-4 { width: 475px; margin-right: 0px; }
.bigspan-18 { width: 715px; margin-right: 0px; }
and
<div class="bigspan-18">
<div class="bigspan-4">
</div>
</div>
remember that you can always design your onw grid