My whole code is this how to set spacing b/w the divs ?It must run smoothly on all devices
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#003380;"></div>
<div class="col-xs-6 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#66a3ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="height:100%;background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</body>
You could wrap another column around the elements, which makes that the padding of the wrapping column provides some sort of margin/spacing.
Is the below code something you are aiming for?
.spacing {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380;"></div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff">left</div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff">Center</div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</div>
</body>
EDIT:
Since you are looking for spacing in all directions (and not only left and right), you can just add an extra class to the wrappers called spacing and the following CSS: (see updated code snippet)
.spacing {
padding: 15px;
}
There are multiple ways to achieve that:
By wrapping your each col with another col
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen" />
</head>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3"><div class="col-xs-12" style="height:100%;background-color:#003380;"></div></div>
<div class="col-xs-6"><div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div></div>
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff"></div></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#cce0ff">left</div></div>
<div class="col-xs-6"><div class="col-xs-12 " style="height:100%;background-color:#66a3ff">Center</div></div>
<div class="col-xs-3"><div class="col-xs-12 " style="height:100%;background-color:#003380">Right </div></div>
</div>
</div>
</body>
This will create default space of 30px between two column
If you wish to create more space then you can use col-xs-offset classes from bootstrap. But this will decrease the size of your columns
You can always use custom classes of your own to change the grid as you want
Easiest would be using a flexbox for the row and padding for the flex items.
.row {
display: flex;
justify-content: space-between;
}
.row div { padding: 1em; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" style="width:100%">
<div class="row">
<div class="col-xs-3" style="background-color:#003380;">X</div>
<div class="col-xs-6 text-center" style="background-color:#66a3ff;">Top </div>
<div class="col-xs-3 " style="background-color:#cce0ff">X</div>
</div>
<div class="row">
<div class="col-xs-3" style="background-color:#66a3ff">X</div>
</div>
<div class="row">
<div class="col-xs-3 " style="background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="background-color:#003380">Right </div>
</div>
</div>
#Aviral Garg Please check following code. I have modified style properties in your code and added classes "common_row" & "common_box" in it, with some properties. You can adjust padding in "common_box" class & margin-bootom in "common_row" class according to your need. It will work fine on all devices as I have added grid classes in it. I hope you were expecting the same.
.common_row{
height:33%;
margin-bottom:10px;
}
.common_row .common_box{
padding:10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="width:100%">
<div class="row common_row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380;"></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-center common_box"style="background-color:#66a3ff;">Top </div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 " style="background-color:#cce0ff"></div>
</div>
<div class="row common_row" style="height:33%">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#66a3ff"></div>
</div>
<div class="row common_row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#cce0ff">left</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 common_box" style="background-color:#66a3ff">Center</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 common_box" style="background-color:#003380">Right </div>
</div>
</div>
If I am right, you want spacing between the divs of class row without a spacing between the container div and its child divs(div.row).
For this you can add bottom margins to all divs except the last div. This can be done as so:
div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
If you want to have spacing between the childs of rows too:
div.row{
margin-bottom: [whatever amount of space you want]; //add bottom margin to the row divs
}
div.row:last-child{
margin-bottom: none; //remove bottom margin from the row div that happens to be the last child in its container(i.e. div.container)
}
div.col-xs-3{
margin: [top margin], 0, [bottom margin], 0;
}
div.col-xs-6{
margin: [topmargin], 0, [bottom margin], 0;
}
Try adding this class to your stylesheet
Pad-10{
padding:1%;
}
and then add the class to your divs
<div class="row Pad-10" style="height:33%">
Related
Our website use bootstrap 4.x
Currently is:
How to add spacing between this elements?
Below is full code Bootstrap:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="banner-slider-top banner-slider-cat">
<div class="row">
<div class="d-none d-xl-block col-lg-3 bn-menu">menu</div>
<div class="col-12 col-xl-9">
<div class="row no-gutters bn-inner">
<div class="col-12 col-sm-12 col-md-7">
<div class="item-bn-slider-05 slider-2 lazyload">
<div class="owl-carousel owl-theme">
<div class="item-slider">
<div class="img-slide">slider</div>
<div class="block-center">
<p class="text-small animated fadeInDownSlide"><span style="color: #3078a6;">LIMITED EDITION</span></p>
<h2 class="text-large animated fadeInDownSlide delay-0s5">Baby Hipseat<br>Carrier<br>Waist Stool</h2>
<div class="text-normal animated fadeInDownSlide delay-1s">
<div>Discount</div>
<p>40% Off</p>
</div>
<div class="btn-wrap animated fadeInDownSlide delay-1s5"><a class="btn-shopnow action primary" href="#"><span>Shop now</span></a></div>
</div>
</div>
</div>
</div>
<script type="text/javascript" xml="space">
// <![CDATA[
require(['jquery', 'owlWidget'], function($) {
$(function() {
$('.item-bn-slider-05').owlWidget({
autoplay: true,
items: 1,
autoplayTimeout: 8000,
dots: true,
nav: true,
loop: true,
margin: 0
});
});
});
// ]]>
</script>
</div>
<div class="col-12 col-sm-12 col-md-5">
<div class="row no-gutters">
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image1</div>
</div>
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image2</div>
</div>
<div class="col-12 col-sm-12">
<div class="item-bn-inner">image3</div>
</div>
</div>
</div>
<div class="col-12 col-sm-12">
<div class="row no-gutters">
<div class="col-12 col-sm-12 col-md-7">
<div class="item-bn-inner">image4</div>
</div>
<div class="col-12 col-sm-12 col-md-5">
<div class="row no-gutters">
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image5</div>
</div>
<div class="col-6 col-sm-6">
<div class="item-bn-inner">image6</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would like an effect similar to:
Could someone please help how can i do this? I will be grateful for any hint. I searched the forum but unfortunately I don't see any similar solution here. Thanks again to everyone for the help.
So you should add a padding to the main container:
.banner-slider-cat .bn-inner{
padding:0 10px 10px 0;
}
The padding is just on right and bottom because you'll have a margin on items on left and top:
.item-bn-inner, .slider-2 {
margin-left: 10px;
margin-top: 10px;
}
The you have to resize the "Combo 5x newborn..." container to 182px:
.item-bn-inner .item-bn{
height: 182px;
}
You should add margin to the elements, you could do margin-right, margin-top etc. Margin will create extra space between an element ( class ) you put it on.
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin: 10px;
In your case:
.item-bn-inner{margin:10px}
I´m trying to acchive this image gallery using bootstrap grid layout:
but I can´t overflow the last image on the second row into the first row...
Here is my html code:
.gal-container {
display: block;
width: 100%;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 32px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<section>
<div class="gal-container">
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding"><img src="img/image1.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image2.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image3.jpg"></div>
</div>
<div class="row">
<div class="col-sm-3 nopadding"><img src="img/image4.jpg"></div>
<div class="col-sm-3 nopadding"><img src="img/image5.jpg"></div>
<div class="col-sm-6 nopadding"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
The result of this code is this:
I would appreciate the help to put the Stranger Things image at the bottom of the two small pictures :)
There's absolutely no custom css needed for this and the job can be done with less code using native Bootstrap 4 classes alone:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<section class="container">
<div class="row no-gutters">
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-12"><img src="img/image1.jpg"></div>
<div class="col-sm-6"><img src="img/image2.jpg"></div>
<div class="col-sm-6"><img src="img/image3.jpg"></div>
</div>
</div>
<div class="col-sm-6">
<div class="row no-gutters">
<div class="col-sm-6"><img src="img/image4.jpg"></div>
<div class="col-sm-6"><img src="img/image5.jpg"></div>
<div class="col"><img src="img/image6.jpg"></div>
</div>
</div>
</div>
</section>
Your markup is not matching as per your desired layout.It should be something like this :
<div class="box">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image1.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image2.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image3.jpg">
</div>
</div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding">
<img src="img/image4.jpg">
</div>
<div class="row">
<div class="col-sm-6 nopadding">
<img src="img/image5.jpg">
</div>
<div class="col-sm-6 nopadding">
<img src="img/image6.jpg">
</div>
</div>
</div>
</div>
</div>
Also add overflow:hidden in nopadding.
Hope it helps !
If you just swap around positioning and the wrappers, you should be able to get your desired effect
Also, you will have to take into account the paddings and widths you need as they will affect the positioning of the elements.
Demo works in full screen due to size
.gal-container {
display: block;
width: 600px;
padding: 16px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.box {
padding: 30px;
}
.row img {
max-width: 100%;
max-height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gal-container">
<div class="row">
<div class="col-sm-6 nopadding">
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
</div>
<div class="col-sm-6 nopadding">
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-6 nopadding"> <img src="http://via.placeholder.com/150x100"> </div>
<div class="col-sm-12 nopadding"> <img src="http://via.placeholder.com/300x150"></div>
</div>
</div>
</div>
I'm trying to add two dividers inside another divider, yet I couldn't figure out how force the child dividers to be inside the parent divider.
How can I control the child dividers location inside the parent divider?
#graph-container {
border: solid;
}
#graph-info {
border: solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="panel with-nav-tabs panel-default">
<div class="panel-heading">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Main
</ul>
</div>
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="home">Main</div>
<div class="container" id="graph_panel">
<div class="row">
<div class="container col-xs-12 col-sm-12 col-md-8 col-lg-8 bg-info " style="height: 800px;" id="graph-container">
</div>
<div class="container col-xs-12 col-sm-12 col-md-4 col-lg-4 bg-danger" style="height: 800px" id="graph-info">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Add width:auto to your #graph_panel
You are already inside a .container > .row so it is not needed to add one more inside it.
See this bootply fiddle
I am working on a grid layout for a website using bootstrap framework. I want a grid that displays 2 stacking divs that span the width of col-lg-4 next to one large div that spans the width of col-lg-8 and is equal in height to the two stacking div's.
<div class="mockups_wadels">
<div class="div_center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 grid_padding">
<div class="wadels_dark">
</div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-12 grid_padding">
<div class="wadels_embroidery">
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 grid_padding">
<div class="wadels_white">
</div>
</div>
</div><!--end of row-->
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wadels_browser">
</div>
</div>
</div>
</div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->
Here is a jsfiddle to help illustrate. My issue is that I do not know how to force the two col-lg-4 divs to stack on top of each other. Instead of stacking the second div simply starts a new row. http://jsfiddle.net/Dinkledine/0w2fppx6/
desire result
thanks for your help
Here is my solution with panel and col layout.If you need padding remove nopadding from class
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
</style>
</head>
<body>
<div class="container-fluid row-offcanvas nopadding">
<div class="col-sm-5 nopadding">
<!--Content 1-->
<div class="col-sm-12 col-md-12 nopadding">
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightblue; color: #000; font-weight:bold">content 1</div>
<div class="panel-body" style="height:270px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightblue;"></div>
</div>
</div><!--Content 1 Ends-->
<!--Content 2-->
<div class="col-sm-12 col-md-12 nopadding" >
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">content 2</div>
<div class="panel-body" style="height:270px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightsteelblue;"></div>
</div>
</div><!--Content 2 Ends-->
</div>
<div class="col-sm-7 nopadding">
<!--Content 3 -->
<div class="col-sm-12 col-md-12 nopadding">
<div class="panel panel-default nopadding">
<div class="panel-heading" style="background-color: lightsteelblue; font-weight:bold">Content 3</div>
<div class="panel-body" style="height:602px;overflow:auto;"></div>
<div class="panel-footer" style="background-color: lightsteelblue;"></div>
</div>
</div><!--Content 3 Ends -->
</div>
</div> <!--row-->
</body>
</html>
I dont think this is best solution but check it out http://jsfiddle.net/b4voqjud/2/
<div class="mockups_wadels">
<div class="div_center">
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="wadels_dark"></div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="wadels_dark"></div>
</div>
</div>
</div>
<div class="col-sm-8">
<div class="wadels_dark"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="wadels_browser">
</div>
</div>
</div>
</div><!--container end-->
</div><!--end div center-->
</div><!--end of mockup-->
And if you want those two colums to always be same height i don't think you can do that with bootstrap and you have to use javascript, or flexbox, or just adjust padding on different device sizes
You could do something like this :
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<div class="col-lg-12 col-md-12 col-sm-12"></div>
<div class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
<div class="col-lg-8 col-md-8 col-sm-8">
<div class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
</div>
Remember that rows are 12 column based so you think about the bigger layout.
You initially split your screen the way you want ( 4 + 8 ) , inside of those is where the magic happens !
Since a 12 col wide div is occupying the whole space ( it could be a container or any sized div ), the next div will stack below it.
Somehow I can not get out how to finish my code which I formatted as a list and need to format it as grid too which is switched by javascript.
My HTML Code below is used to list a content:
<div class="list">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Right is next DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Right is next DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS Code for the list. All other CSS is taken by bootstrap:
.styled_view div.list {
padding: 0;
width: 100%;
}
The same code should be used to show grid:
<div class="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">Under me should be a DIV</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12">I am the last DIV</div>
</div>
</div>
The CSS for the grid:
.styled_view div.grid {
display: inline-block;
overflow: hidden;
vertical-align: top;
width: 19.4%;
}
The 19.4% for each part of gallery keeps the DIVs next to next. It will not push it to a new line. How could I solve it?
Do a row div.
Like this:
<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="grid">
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 bg-success">Under me should be a DIV</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12 bg-danger">Under me should be a DIV</div>
</div>
<div class="row">
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 bg-warning">I am the last DIV</div>
</div>
</div>
If your your list is dynamically generated with unknown number and your target is to always have last div in a new line set last div class to "col-xl-12" and remove other classes so it will always take a full row.
This is a copy of your code corrected so that last div always occupy a full row (I although removed unnecessary classes).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="grid">
<div class="row">
<div class="col-sm-3">Under me should be a DIV</div>
<div class="col-md-6 col-sm-5">Under me should be a DIV</div>
<div class="col-xl-12">I am the last DIV and I always take a full row for my self!!</div>
</div>
</div>