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
Related
Thanks in advance for your help!
I work in bootstrap 4 building websites, I'm trying to build the following design:
I can't get my head round how it will work! At the moment I have the whole box set to container-fluid so there isn't any padding/margins applied but I don't understand how I can structure the columns to get it to work.
Here's my HTML for what I have tried so far:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h3 class="mega-menu-heading">About</h3>
</div>
<div class="col-sm-3 g-pa-0">
<ul class="list-unstyled style-list">
<li class="serviceAbout">[insert] </li>
<li class="serviceAbout">[insert]</li>
</ul>
</div>
<div class="col-sm-3 g-pa-0">
<ul class="list-unstyled style-list">
<li class="serviceAbout">[insert] </li>
<li class="serviceAbout">[insert] </li>
</ul>
</div>
<div class="col-sm-3 g-pa-0">
<ul class="list-unstyled style-list">
<li class="serviceAbout">[insert] </li>
<li class="serviceAbout">[insert] </li>
</ul>
</div>
<div class="col-sm-3 g-pa-0">
<img class="img-responsive g-pa-0 g-ma-0" src="/assets/images/misc/nav-image.jpg">
</div>
<!--/end row-->
</div>
</div>
I understand that the col-12 is taking up all the available space in the container so I cannot have an image full height of the container but I'm not sure what other way I can do it.
Any help would be appreciated, this must be possible I'm probably just missing something!
Thanks,
You could create a first row having 2 columns : col-sm-9 and col-sm-3.
Then create another row in the col-sm-9 to list your services and use the col-sm-3 to display your image.
div {
text-align: center;
background-color: rgba(86,61,124,.15);
border: 1px solid rgba(86,61,124,.2);
}
.bgimg {
background-image: url('https://mdn.mozillademos.org/files/7693/catfront.png');
background-size: contain;
background-repeat: no-repeat;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-9">
<div class="row">
<div class="col-sm-12">Our services</div>
<div class="col-sm-4">Service 1</div>
<div class="col-sm-4">Service 2</div>
<div class="col-sm-4">Service 3</div>
<div class="col-sm-4">Service 4</div>
<div class="col-sm-4">Service 5</div>
<div class="col-sm-4">Service 6</div>
</div>
</div>
<div class="col-sm-3 bgimg">
Image full-height
</div>
</div>
</div>
You can use bootstrap grid systems. Use container, row and col pattern.
To understand it better go to this link.
Try this code structure:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css">
<div class="container text-center">
<div class="row">
<div class="col-9">
<div class="row">Our Services</div>
<div class="row">
<div class="col-4">Service 1</div>
<div class="col-4">Service 2</div>
<div class="col-4">Service 3</div>
</div>
<div class="row">
<div class="col-4">Service 4</div>
<div class="col-4">Service 5</div>
<div class="col-4">Service 6</div>
</div>
</div>
<div class="col-3">
<img src="https://source.unsplash.com/100x100/?documents" class="img" alt="img">
</div>
</div>
</div>
This question already has answers here:
bootstrap grid uneven columns
(4 answers)
Empty vertical space between columns in Bootstrap 4
(2 answers)
Closed 4 years ago.
I am using bootstrap for my web application.I want my divs to be displayed as below:
my html is as follows:
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 mb-4">
<!--content-->
</div>
<div class="col-lg-4 col-md-6 col-sm-6 mb-4">
<!-content-->
</div>
</div>
<div class="row">
<div class="col-lg-8 col-md-12 col-sm-12 mb-4">
<!--content-->
</div>
But the output displayed is as follows:
How can i change the html so that it can be displayed in the required format
To achieve that you should right row column inside column try this
<div class="container border border-primary">
<div class="row border border-primary">
<div class="border border-primary col-lg-8 col-md-12 col-sm-12" style="height:200px">
<div class="row border border-secondary">
<div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
<!--content for 1-->
</div>
<div class="border border-secondary col-lg-12 col-md-12 col-sm-12" style="height:100px">
<!--content for 2-->
</div>
</div>
</div>
<div class="border border-primary col-lg-4 col-md-6 col-sm-6" style="height:200px">
<!-content for 3-->
</div>
</div>
You need to check that your col's add up to 12, looks like some of your responsive selectors such as col-md-12 were causing the issue. Here's a working demo:
.col-4, .col-8 > .row{border: 3px solid black; padding: 30px; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-8">
<div class="row">
<!--content-->
col-8
</div>
<div class="row">
<!--content-->
col-8
</div>
</div>
<div class="col-4">
<div class="row">
col-4
</div>
</div>
</div>
Please refer to the Bootstrap docs on Grid System for more info
div {
border: 1px solid #3d3d3d;
padding: 5px;
}
// Dont consider this css
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-md-12">col-md-12</div>
<div class="col-md-12">col-md-12</div>
</div>
</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
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%">
I'm trying to put and left align an image within a column but the img is always automatically centered within a colum. I'm not so familiar with Bootstrap and I would be happy if you could show me the reason why it doesn't work.
Here is my code
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
<h1>Basic</h1>
</div>
<div class="panel-body">
<p>test</p>
<!--Portfolio Container-->
<div class="container-fluid text-center pull-left bg-grey">
<div class="row" border>
<div class="col-lg-12" width="100%">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Yes we built Paris</strong></p>
</div>
</div>
</div>
</div>
</div>
Many thanks in advance!
Text-center class used to center align content inside column , Remove text-center class from the parent container-fluid or override the css
<style>
.thumbnail img
{
text-align:left;
}
</style>
Just remove text-center from the parent container-fluid..
<div class="container-fluid pull-left bg-grey">
<div class="row" border="">
<div class="col-lg-12" width="100%">
<div class="thumbnail">
<img src="paris.jpg" alt="Paris">
<p><strong>Yes we built Paris</strong></p>
</div>
</div>
</div>
</div>
http://www.codeply.com/go/HOONi5zSpD
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.