Suppose I have the following very simple HTML page layout:
<div class="wrapper">
<div class="content"></div>
<div class="sidebar"></div>
</div>
And the sass
.content {
#include make-sm-column(7);
#include make-sm-column-push(5);
}
.sidebar {
#include make-sm-column(5);
#include make-sm-column-pull(7);
}
The sidebar has to come after the content.
Is there a way to have the content "pushed" to the right only if a sidebar is present?
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
Im using Bootstrap 3 to layout my website with fluid grid, but the boxes in the grid don't line up in a row.
You can see:
When a box is taller than another, the grid is not left aligned.
How can I fix it with some hack ? Thank for help !
Note : the height of box is auto wrap contents.
My html code
<div class="row">
<?php foreach($contens as $content){?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
................ some code .............
</div>
</div>
<?php } ?>
</div>
I'm not sure exactly what you're trying to accomplish, but the issue is caused because the content of the columns varies in height. There are 3 overall approaches to fix grid alignment / height issues..
1. A CSS only approach (using CSS3 column width) like this..
http://bootply.com/85737
2. A 'clearfix' approach like this (requires iteration every x columns). This is the approach recommended by Bootstrap known as "responsive resets"..
http://bootply.com/89910 (there is also a CSS-only variation to this approach)
3. Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
Update 2017
Another option is to make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
Bootstrap 4 uses flexbox so columns in each row are the same height by default (without the extra CSS).
More on Bootstrap Variable Height Columns
Enforce a height for each <div> column.
I would give your columns a class name:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
...
</div>
And then do something like this:
.outer {
height: 200px /* Or whatever the height really is */
}
Your columns are being laid out weird because of the varying heights of the boxes. Enforcing a height of the container element will fix that.
The best part is, this doesn't require you to add random <div>'s that don't have anything to do with the content.
EDIT:
You could also enforce the height only when you're using the 'sm' breakpoints and above.
This would ensure that everything lines up when columns are being used, and that there won't be large gaps in between each one when they're full width (i.e. col-xs-12).
#media (min-width: 768px) {
.outer {
height: 200px /* Or whatever */
}
}
I had a similar problem. I fixed with this script pretty quickly and pain free:
<script>
$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
$('#container').isotope({
itemSelector : '.items',
layoutMode : 'fitRows'
});
});
</script>
in your case, you will need to add a container ID e.g. '#container' and add the class to each item e.g. '.item'
Here's a super simple jQuery solution to get all elements still aligned.
I solved this issue by getting the column with highest height and setting this height to every other columns. Try the snippet below.
setTimeout(function(){
var maxHeight = 0;
$('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
$('.item').each(function() {$(this).height(maxHeight)});
}, 1000);
.item {
border: 1px solid black;
}
.big {
height:50px;
background-color:fuchsia;
}
.normal {
height:40px;
background-color:aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 item big">I am big</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
</div>
I think you need to use clearfix. just put the classclearfix on your parent element (in your case, row, I think) and put this in your css:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
I agree with Skelly in that a masonry plugin is probably the way to go, but for a quick easy fix you can just make a new row every time you want something left aligned - its a quick and dirty hack and can have some issues on smaller viewports.
My solution:
I worked with the visible- classes of bootstrap 3
<div class="row">
<?php
$indexLg = 1;
$indexSm = 1;
foreach($contens as $content) {?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
</div>
</div>
<?php
if($indexLg%4 == 0) {
$indexLg = 1;
?>
<div class="clearfix visible-lg visible-md"></div>
<?php
}
if($indexSm%2 == 0) {
$indexSm = 1;
?>
<div class="clearfix visible-sm"></div>
<?php
}
?>
<div class="clearfix visible-xs"></div>
<?php
}
} ?>
I'm having a very basic problem getting columns to work in Foundation 4 with Sass/Compass.
At screen sizes larger than the $small media-query breakpoint (768px), I want the two columns to be of equal width (6 columns each) and beside each other. Right now, at screen sizes larger than $small, each column only occupies the left half of the page, with the second column bumping down below the first.
I've tried using Foundation's classes rather than the Sass mixins, but I'm getting the same result. I've also tried resetting to the Foundation default settings and imports, but nothing changes.
I have the following HTML:
<section>
<div class="header">
<h1>Sample text here.</h1>
</div>
<div class="content">
<p>Sample text here.</p>
</div>
</section>
I'm using the following SCSS:
section {
#include grid-row;
}
.header {
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
.content {
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
And here's a link to the reduced test case: http://bit.ly/149zpEq
The red column and green column should be side-by-side at screen sizes wider than 768px. Alas, they aren't.
Use this markup without any additional sass code:
<section class="row">
<div class="large-6 medium-6 small-12 columns">
<div class="header">
<h1>Sample text here.</h1>
</div>
</div>
<div class="large-6 medium-6 small-12 columns">
<div class="content">
<p>Sample text here.</p>
</div>
</div>
</section>
You just need add 'large-6' and 'medium-6' for screen larger than $small and add 'small-12' for small screen.
Change your Sass to this.
.header {
display: table-cell;
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
.content {
display: table-cell;
#include grid-column( 12 );
#media #{$small} {
#include grid-column( 6 );
}
}
display: table on it's own is not enough, child elements must have display: table-cell.
Another option would be
section > div{
display: table-cell;
}
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>