I have a page with multiple columns, a header, and a footer. I want a column to scroll with the user, but not overlap the footer:
<html>
<head></head>
<body>
<div id="wrap">
<div id="main" class="clear-top">
<div class="col-lg-12">
<div class="row pl-4 justify-content-between pb-4">
<div class="col-lg-1 col-md-12 col-sm-12 ">
</div>
<div class="col-lg-7 col-md-12 col-sm-12 ">
... Main Content ...
</div>
<div class="col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container">
... Content I want to Scroll with User ...
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
</div>
</footer>
</html>
CSS:
// General Styling
html, body{
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}
.footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
width: 100%;
bottom: 0;
}
I'm using Bootstrap 4, so I've tried adding the sticky-top class to the column I want to scroll, however nothing changed.
I've tried changing the position of the column to sticky, but again nothing seems to change. Am I adding this to the wrong div?
As per my understanding, you are looking forward to have a sidebar which floats through the content. If that's the case here is the solution. I have used sticky-top which sticks your side-nav to the top. No need to use any CSS to align your footer to the bottom. You can use bootstrap inbuilt class d-flex flex-column min-vh-100 to your main container and use mt-auto to your footer. This will align your footer to the bottom of the page
.custom-container {
height: 500vh;
}
ul {
list-style: none;
padding: 0
}
footer {
background: yellow
}
#side-nav {
background: blue;
height: 100%
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container-fluid d-flex flex-column min-vh-100">
<div class="row">
<div class="col-sm-4">
<div id="side-nav">
<ul class="sticky-top text-center">
<li><button id=1>Link1</button></li>
<li><button id=2>Link2</button></li>
<li><button id=3>Link3</button></li>
</ul>
</div>
</div>
<div class="col-sm-8 ">
<div class="custom-container">
<h2>Content that scrolls</h2>
<h5>What is Lorem Ipsum Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a
type specimen book it has?</h5>
</div>
</div>
</div>
<footer class="mt-auto">footer</footer>
</body>
</div>
I'm building a sidebar using the grid system in Bootstrap 4, and the Flexbox utility. For the most part, I have it working, except that I would like to have the sidebar be "static," that is, it should not move when the user scrolls on the page next to it.
I attempted to do this by adding position:fixed to it, but when I did that, the column the sidebar was in was reduced in size to the length of the longest string that was there.
How do I make the sidebar stay fixed in place, while maintaining column width?
Here's my code: (It's a React app, so "class" is replaced with "className")
Parent component:
{ this.state.isLoggedIn ?
<div className="row h-100">
<div className="col-2 no-padding-right">
<Sidebar />
</div>
<div className="col-10 no-padding-left">
<Main />
</div>
</div> :
<Main />
}
The sidebar itself:
<div className="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div className="p-2">
Week 11
</div>
<div className="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div className="p-2">Current Features</div>
<div className="p-2">Feature Request</div>
<div className="p-2">Settings</div>
<div className="p-2">Billing</div>
<div className="p-2">Log Out</div>
</div>
And the relevant piece of CSS:
.sidebar-left {
padding-top: 83px;
position: fixed;
}
Thanks!
Apply the max-width to the sidebar-left is equal to how much your col have.
.sidebar-left {
max-width: 16.666667%;
}
Stack Snippet
body {
margin: 0;
}
.sidebar-left {
font: 13px Verdana;
padding-top: 83px;
position: fixed;
background: red;
max-width: 16.666667%;
left: 0;
top: 0;
overflow: auto;
}
.p-2 {
word-break: break-word;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<div class="row h-100">
<div class="col-2 no-padding-right">
<div class="d-flex h-100 align-items-start sidebar-left flex-column sidebar-background sidebar-text">
<div class="p-2">
Week 11
</div>
<div class="mb-auto align-self-stretch h-100 p-2">Leagues/Teams</div>
<div class="p-2">Current Features</div>
<div class="p-2">Feature Request</div>
<div class="p-2">Settings</div>
<div class="p-2">Billing</div>
<div class="p-2">Log Out</div>
</div>
</div>
<div class="col-10 no-padding-left">
<div class="main"></div>
</div>
</div>
I'm trying to achieve a layout like below in Bootstrap but am having a difficult time with it. I feel dumb asking this but it's my first time using Bootstrap and I couldn't find a similar example on here.
Thanks!
I thought maybe something like this, but div C clears div B and ends up way too far down the page.
<div class="container">
<div class="row">
<div class="col-md-8">
A
</div>
<div class="col-md-4">
B
</div>
</div>
<div class="row">
<div class="col-md-8">
C
</div>
</div>
</div>
If you need a pure bootstrap solution you need to add col-xs-12 to make it 100% on mobiles and col-sm-6 to make it 50% on desktop. The add pull-left and pull-right to avoid the B panel to clear and move C below everything
.bg-danger, .bg-primary {
height: 200px;
}
.bg-success {
height: 400px;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row container-fluid">
<div class="col-sm-6 col-xs-12 bg-danger pull-left"></div>
<div class="col-sm-6 col-xs-12 bg-success pull-right"></div>
<div class="col-sm-6 col-xs-12 bg-primary pull-left"></div>
</div>
</div></body>
</html>
Click full page to see the difference
Here we have an explanation about the grid system.
http://getbootstrap.com/css/#grid
Here's a simple solution:
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
</div>
<div class="col-sm-12">
</div>
</div>
</div>
<div class="col-sm-6">
</div>
</div>
</div>
The page is split in half with the two outer columns "col-sm-6", with one of these columns containing two inner columns that span it's entire width
A simple solution if you want essentailly the green box to come in between.
Check this Bootply for responsive-ness check.
Snippet here:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="something bg-danger"></div>
</div>
<div class="col-md-6">
<div class="something bg-success"></div>
</div>
<div class="col-md-6">
<div class="something bg-primary"></div>
</div>
</div>
</div>
Here is another example where the Green box will come below the rest two boxes..:
.something {
height: 100px;
margin-top: 10px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div clas="col-md-6">
<div class="col-md-12">
<div class="something bg-danger"></div>
</div>
<div class="col-md-12">
<div class="something bg-primary"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="something bg-success"></div>
</div>
</div>
</div>
You should use Pure CSS Flexbox for this.
Have a look at the snippet below (use full screen for desktop mode):
.box-holder {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 300px;
height: 280px;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #000;
color: #fff;
margin: 15px;
font-size: 40px;
font-weight: 200;
}
.a {
background: red;
}
.b {
align-self: flex-start;
order: 1;
background: green;
height: 240px;
margin: 0;
}
.c {
background: blue;
}
/* On Mobiles */
#media screen and (max-width: 700px) {
.box-holder {
width: auto;
height: auto;
}
.b {
align-self: center !important;
order: 0;
margin: 15px;
}
}
<div class="box-holder">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
</div>
Hope this helps!
I hope this helps..:)
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-sm-3"><!--div for the left side abc pattern starts-->
<div class="row">
<div class="col-sm-12">
"standing a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing b - adjust the height of this block"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"standing c"
</div>
</div>
</div><!-- div for the left side abc pattern ends -->
<div class="col-sm-6"><!-- div for the right side abc pattern starts -->
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-12">
"block a"
</div>
</div>
<div class="row">
<div class="col-sm-12">
"block b"
</div>
</div>
</div>
<div class="col-sm-6">
"block c"
</div>
</div>
</div><!-- div for the right side abc pattern ends -->
</div><!-- row closed here -->
</div>
I want to achieve a grid like the shown below:
I have been looking to Twitter Bootstrap grid system, but since it is oriented to rows, I can't see how to achieve this.
Is there any way of doing it, or should I stick to manually css?
You can nest Rows and cols:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-12">left top</div>
<div class="col-md-12">left bottom</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-12">right top</div>
<div class="col-md-12">right bottom</div>
</div>
</div>
</div>
See http://getbootstrap.com/css/#grid under "Nesting Columns"
You can still use Bootstrap grid with some custom styles:
.block {
border: 3px #222 solid;
padding: 10px;
margin-bottom: 10px;
}
.block-1 {
height: 100px;
}
.block-2 {
height: 50px;
}
.block-3 {
height: 50px;
}
.block-4 {
height: 100px;
}
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div class="container">
<div class="row">
<div class="col-xs-8">
<div class="block block-1">Block 1</div>
<div class="block block-2">Block 2</div>
</div>
<div class="col-xs-4">
<div class="block block-3">Block 3</div>
<div class="block block-4">Block 4</div>
</div>
</div>
</div>
Just set 2 parents width col-xs-* with children
main{padding: 20px}
section, article{display: inline}
article, div{border: 4px solid black; margin-bottom: 10px}
article:nth-child(1){height: 80px}
article:nth-child(2){height: 40px}
div:nth-child(1){height: 30px}
div:nth-child(2){height: 90px}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<main class=row>
<section class="col-xs-8">
<article></article>
<article></article>
</section>
<aside class="col-xs-4">
<div></div>
<div></div>
</aside>
</main>
Read more about Grid system .
I have two columns:
<div class="col-md-6"></div>
<div class="col-md-6"></div>
How can I add a space between them?
The output would simply be two columns right next to each other taking up the whole width of the page. Say the width was set to 1000px then each div would be 500px wide.
If I wanted a 100px space between the two how could I achieve this automatically with Bootstrap: the divs sizes would become 450px each to compensate for the spacing.
I was facing the same issue; and the following worked well for me.
<div class="row">
<div class="col-md-6">
<div class="col-md-12">
Some Content..
</div>
</div>
<div class="col-md-6">
<div class="col-md-12">
Some Second Content..
</div>
</div>
</div>
This will automatically render some space between the 2 divs.
You can achieve spacing between columns using the col-md-offset-* classes, documented here. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
<div class="row">
<div class="col-md-5"></div>
<div class="col-md-5 col-md-offset-2"></div>
</div>
In Bootstrap 4 use: offset-2 or offset-md-2
I know I'm late to the party, but you could try spacing the boxes with padding.
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
<div class="col-md-6 box">
<div class="inner">Hello</div>
</div>
CSS:
.box {
padding: 0 5px 0 5px;
}
.box .inner {
background-color: #fff;
}
Have a go at it
you can use background-clip and box-model with border proprety
.box{
box-sizing: border-box;
border: 3px solid transparent;
background-clip:padding-box;
}
<div class="row">
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
<div class="col-xs-4 box"></div>
</div>
I have had similar issues with space between columns. The root problem is that columns in bootstrap 3 and 4 use padding instead of margin. So background colors for two adjacent columns touch each other.
I found a solution that fit our problem and will most likely work for most people trying to space columns and maintain the same gutter widths as the rest of the grid system.
This was the end result we were going for
Having the gap with a drop shadow between columns was problematic. We did not want extra space between columns. We just wanted the gutters to be "transparent" so the background color of the site would appear between two white columns.
this is the markup for the two columns
<div class="row">
<div class="col-sm-7">
<div class="raised-block">
<h3>Facebook</h3>
</div>
</div>
<div class="col-sm-5">
<div class="raised-block">
<h3>Tweets</h3>
</div>
</div>
</div>
CSS
.raised-block {
background-color: #fff;
margin-bottom: 10px;
margin-left: 0;
margin-right: -0.625rem; // for us 0.625rem == 10px
padding-left: 0.625rem;
padding-right: 0.625rem;
}
#media (max-width: 33.9em){ // this is for our mobile layout where columns stack
.raised-block {
margin-left: -0.625rem;
}
}
.row [class^="col-"]:first-child>.raised-block {
// this is so the first column has no margin so it will not be "indented"
margin-left: -0.625rem;
}
This approach does require an inner div with negative margins just like the "row" class bootstrap uses. And this div, we called it "raised-block", must be the direct sibling of a column
This way you still get proper padding inside your columns. I have seen solutions that appear to work by creating space, but unfortunately the columns they create have extra padding on either side of the row so it ends up making the row thinner that the grid layout was designed for. If you look at the image for the desired look, this would mean the two columns together would be smaller than the one larger one on top which breaks the natural structure of the grid.
The major drawback to this approach is that it requires extra markup wrapping the content of each columns. For us this works because only specific columns needed space between them to achieve the desired look.
According to Bootstrap 4 documentation you should give the parent a negative margin mx-n*, and the children a positive padding px-*
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row mx-n5">
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
This will allow a space between the two columns and obviously if you want to change the default width you can go for mixins to modify the default bootstrap width. Or, you can give the width using the inline CSS style.
<div class="col-md-5 pull-left"></div>
<div class="col-md-5 pull-right"></div>
You can achieve spacing between columns using the col-xs-* classes,within in a col-xs-* div coded below. The spacing is consistent so that all of your columns line up correctly. To get even spacing and column size I would do the following:
<div class="container">
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
<div class="col-md-3 ">
<div class="col-md-12 well">
Some Second Content..
</div>
</div>
</div>
Since you're using bootstrap, I guess you want to make the thing responsive. In that case you should'n use fixed sizes, in 'px' for example.
As a workaround to other solutions, I propose make both columns "col-md-5" instead of "col-md-6", and then in the parent element "row" that contains the columns, add the class "justify-content-between", which puts the free space in the middle, as you can check in the bootstrap doc here
This solution is also valid for more than two columns adjusting the "col-md-x" of course
hope it helps ;)
Inside the col-md-?, create another div and put picture in that div, than you can easily add padding like so.
<div class="row">
<div class="col-md-8">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<img src="#"/>
</div>
</div>
</div>
<style>
thumbnail{
padding:4px;
}
</style>
Bootstrap 4, file custom.scss you can add following code:
$grid-gutter-width-base: 20px;
$grid-gutter-widths: ( xs: $grid-gutter-width-base,
sm: $grid-gutter-width-base,
md: $grid-gutter-width-base,
lg: $grid-gutter-width-base,
xl: $grid-gutter-width-base
);
by default $grid-gutter-width-base: 30px;
Since you are using Bootstrap, the column-gap property will be useful to implement. W3Schools Column-Gap for Bootstrap has documentation on how this can be used.
CSS:
.col-gap {
column-gap: 2rem;
}
And for the HTML, have the class (col-gap) in the row div.
But also note this may throw off the spacing of the col-md-6 (or other sizes) so to compensate reduce the size for each column.
(i.e. col-md-6 -> col-md-5, even if there are only 2 columns)
HTML:
//Row
<div class="row col-gap justify-content-center">
//Col 1
<div class="col-md-5 ms-3 card p-5">
<p>Div 1</p>
</div>
//Col 2
<div class="col-md-5 ms-3 card p-5">
<p>Div 2</p>
</div>
</div>
bootstrap 5 provides a more comfortable way to add cols gaps using g-* class
<div class="container">
<div class="row g-2">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
</div>
docs: https://getbootstrap.com/docs/5.0/layout/gutters/
Bootstrap 4 - Separate columns using nested rows.
<div class="container">
<div class="row bg-info p-3">
<!-- left column -->
<div class="col-8 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
<!-- right column -->
<div class="col-4 ">
<div class="col-12 bg-light p-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro error enim, perferendis rerum, sit laudantium alias esse quas quae mollitia illum suscipit veritatis distinctio facere officia ullam repellendus accusamus odio!
</div>
</div>
</div>
</div>
I had to figure out how to do this for 3 columns. I wanted to round the corners of the divs and couldn't get the spacing to work. I used margins. In my case I figured for 90% of the screen to be filled in by the divs and 10% for margins:
html:
<div class="row">
<div id="orange" class="col-md-4">
<h1>Orange Div</h1>
</div>
<div id="green" class="col-md-4">
<h1>Green Div</h1>
</div>
<div id="aqua" class="col-md-4">
<h1>Aqua Div</h1>
</div>
</div>
and CSS:
#orange {
background-color:orange;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width:30%;
}
#green {
background-color:green;
border-radius: 30px;
padding: 20px;
margin: 2.5% 0 0 0;
width:30%;
}
#aqua {
background-color:#39F;
border-radius: 30px;
padding: 20px;
margin: 2.5% 2.5% 0 2.5%;
width: 30%;
}
To make it resize correctly for mobile devices, I had the CSS change the width from 30% to width:92.5%; under #media (max-width:1023px)
it's simple .. you have to add solid border right, left to col-*
and it should be work ..:)
it looks like this : http://i.stack.imgur.com/CF5ZV.png
HTML :
<div class="row">
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
<div class="col-sm-3" id="services_block">
</div>
</div>
CSS :
div#services_block {
height: 355px;
background-color: #33363a;
border-left:3px solid white;
border-right:3px solid white;
}
Just white border around wrap element
.padding-pls{
border-left: 13px solid white;
border-right: 13px solid white;
}
.row .col-md-6:first-child>.padding-pls {
border-left: 0px solid white;
}
.row .col-md-6:last-child>.padding-pls {
border-right: 0px solid white;
}
and first+last child no border
<div class="row">
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
<div class="col-md-6">
<div class="col-md-12 padding-pls">
Keci
</div>
</div>
</div>
Use bootstrap's .form-group class. Like this in your case:
<div class="col-md-6 form-group"></div>
<div class="col-md-6 form-group"></div>
I know this post is a little dated but I ran in to this same problem. Example of my html.
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label asp-for="FirstName" class="control-label"></label>
<input asp-for="FirstName" class="form-control" />
<span asp-validation-for="FirstName" class="text-danger"></span>
</div>
</div>
<div class="col-xs-3">
<div class="form-group">
<label asp-for="LastName" class="control-label"></label>
<input asp-for="LastName" class="form-control" />
<span asp-validation-for="LastName" class="text-danger"></span>
</div>
</div>
</div>
In order to create space between the groups I overrode bootstrap's margin of -15px in my site.css file by reducing the negative margin by 5.
Here's what I did...
.form-group {
margin-right: -10px;
}
I hope this helps somebody else.
I needed one column on mobile and two columns from tablet portrait up, with equal spacing between them in the middle (also without any grid-added padding inside columns). Could be achieved using spacing utilities and omitting the number in col-md:
<div class="container-fluid px-0">
<div class="row no-gutters">
<div class="col-sm-12 col-md mr-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
<div class="col-sm-12 col-md ml-md-3" style="background-color: orange">
<p><strong>Column 1</strong></p>
</div>
</div>
</div>
Bootstrap col slightly uses some spaces both to the left and right. I have just added a block element like div and set the border for the differences. Also, adding some extra padding or margin in that extra div will work perfectly..
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<br><br>
<div class="container">
<div class="row">
<div class="col-6 ">
<div class="border border-danger ">
<h2 class="text-center">1</h2>
</div>
</div>
<div class="col-6">
<div class="border border-warning">
<h2 class="text-center">2</h2>
</div>
</div>
</div>
</div>
I don't think you can do this with Bootstrap alone. The space between columns is automatically added/maintained.
If you need to add a specific width between columns you can do this trick to simulate the space: https://jsfiddle.net/loginet/3rogbh9s/5/
<div class="row">
<div class="col-6">
<div class="left-column">Left column</div>
</div>
<div class="col-6">
<div class="right-column">Right column</div>
</div>
</div>
and CSS
.left-column {
padding: 10px;
padding-right: 50px;
background: white;
}
.right-column {
padding: 10px;
padding-left: 50px;
background: white;
}
How about just adding a border the same color as the background using css? I'm new to this, so maybe there's a good reason not to, but it looked good when I tried it.
To obtain a particular width of spacing between columns, we have to set up padding in the standard Bootstrap's layout.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
/* Check breakpoint at http://getbootstrap.com/css/#grid-media-queries */
#media (min-width: 992px) {
.space-100-px > .row > .col-md-6:first-child {
padding: 0 50px 0 0; /* The first half of 100px */
}
.space-100-px > .row > .col-md-6:last-child {
padding: 0 0 0 50px; /* The second half of 100px */
}
}
/* The result will be easier to see. */
.space-100-px img {
width: 100%;
height: auto;
}
<div class="container-fluid space-100-px">
<div class="row">
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Left" alt="Left">
</div>
<div class="col-md-6">
<img src="http://placehold.it/450x100?text=Right" alt="Right">
</div>
</div>
</div>
This will be useful..
.list-item{
margin-right:-10px;
margin-top:10px;
margin-bottom: 10px;
border: 1px solid #eee;
padding: 0px;
}
<div class="col-md-4">
<div class="list-item">
<h2>Your name</h2>
</div>
</div>
<div class="col-md-4">
<div class="list-item"></div>
</div>
If use want to increase or decrease further margin in right side of the box then simply edit margin-right property of list-item.
sample output
<div class="col-md-12 no_padding header_row"></div>
<div class="second_row">
<div class="col-md-4 box_shadow"></div>
<div class="col-md-8 no_padding_right">
<div class="col-md-12 box_shadow"></div>
</div>
</div>
body{
background:#F0F0F0;
}
.main_holder{
min-height: 600px;
margin-top: 40px;
height: 600px;
}
.box_shadow{
box-shadow: 0 1px 2px rgba(0,0,0,.1);
background: white;
height: auto;
min-height: 500px;
}
.no_padding{
padding: 0px !important;
}
.no_padding_right{
padding-right: 0px !important;
}
.header_row{
height: 60px;
background: #00796B;
-webkit-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
-moz-box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
box-shadow: 0px 0px 9px 1px rgba(143,140,143,1);
}
.second_row{
position: relative;
width: 100% !important;
top: 20px;
}
<div class="col-md-6">
<div class="inner">
<!-- Put the col-6 elements in the inner div -->
</div>
</div>
This by default provides some padding inside the outer div the way you seem to need. Moreover you can also modify the padding using custom CSS.
Simple Way
.row div{
padding-left: 8px;
padding-right: 8px;
}
Bootstrap 4
Documentation says (here):
Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
So the right answer is: set cols' padding-left/right equal to minus your row's margin-left/right. That simple.
#my-row {
margin-left: -80px;
margin-right: -80px;
}
#my-col {
padding-left: 80px;
padding-right: 80px;
}
Demo: https://codepen.io/frouo/pen/OqGaWN
Create a class and use:
margin: 1.5em .5em;
max-width: calc(50% - 1em)!important;
Where 1em on the max-width is equal to the left/right margin added together.