I used to have a working layout of a header, side navigation column, main large content column , and a footer. Now the navigation column is sitting on top of the content column even though the numbers should add up. I just need my navigation column to line up next to my content. You can see my WIP HERE. What am I doing wrong?
Here is basically what my code for my layout is:
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-10 col-md-10 col-sm-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Your help is greatly appreciated. Thank you! :)
The column divs only line up beside each other for the divs actually are "siblings" to each other, apart from adding up numberwise.
Try putting the navigation and content columns in the same container -> row tag, like so:
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
From the look of your code, it looks like you want your columns next to each other. This should work
<div class="container">
<div class="row">
<div class="page-header">
<p>HEADER</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 hidden-sm hidden-xs">
<p>NAVIGATION</p>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-md-12 col-lg-offset-2 col-md-offset-2 col-sm-offset-0 col-xs-offset-0">
<p>CONTENT</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="page-footer">
<p>FOOTER</p>
</div>
</div>
</div>
Related
How would i do something like this? http://jsfiddle.net/BxaNN/369/
but with the top column in the center top?
NOTE: this is not my code
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2></h2>
<p></p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2></h2>
<p></p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2></h2>
<p></p>
</div>
</div>
</div>
The bootstrap classes you have already does this for you. You just need to reference the bootstrap cdn. You could also, center the text to make it pretty. check out the grid system here: Bootstrap Resource
.container {
text-align: center;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="content" class="col-lg-4 col-lg-push-4 col-sm-12 ">
<h2>1</h2>
<p>1</p>
</div>
<div id="sidebar-left" class="col-lg-4 col-sm-6 col-lg-pull-4">
<h2>2</h2>
<p>2</p>
</div>
<div id="sidebar-right" class="col-lg-4 col-sm-6">
<h2>3</h2>
<p>4</p>
</div>
</div>
</div>
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.
I am doing a website using bootstrap 3.0 which I want the HTML and CSS to be seen neatly on a desktop, tablet and mobile.
A problem that I am having is that when you view the site on a mobile display the column are stacked (in which I am not criticizing as this stops scrolling as much as possible). However, I would like a little gap between the columns (even 1-2px).
The code so far
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns">
..content
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
..content
</div>
</div>
</div>
An image to show what this is doing and to display the stack columns
How could I achieve a little gap between the columns?
Thanks
Add a custom class .column-margin to set the margin between the rows/columns.
#media (max-width: 991px) {
.column-margin {
margin: 2px 0;
}
}
<div class="row">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="Columns column-margin">
<img src="http://placehold.it/300x300" />
</div>
</div>
<div class="col-xs-12 col-sm-8 col-md-4">
<div class="Columns">
<img src="http://placehold.it/300x300" />
</div>
</div>
</div>
Codeply
Give a margin for the col-xs-12 so all blocks will have bottom margin in mobile devices.
#media (max-width: 767px) {
.col-xs-12 {
margin-bottom: 10px;
}
}
To get even spacing and column size I would do the following: (Note: change col-md-* to col-sm-* or col-xs-* as you like )
<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>
I asked a responsive question in my previous post.
How to set responsive divs in my case?
I fixed my html to be valid html codes but it seems like I don't have the padding on the left of red column and right of the gray column anymore in tablet view. I think I do have valid bootstrap class but I am not sure what happen. Can someone help me out about this?
My jsFiddle
http://jsfiddle.net/0qarh5yt/6/
<div class="container">
<div id="wrapper">
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="row">
<div class="col-xs-3 col-md-12 box1">
test
</div>
<div class="col-xs-9 col-md-12 box2">
test 2
</div>
</div>
</div>
</div>
</div>
</div>
You have negative margins on row:
.row {
margin-right: -15px;
margin-left: -15px;
}
if you delete these or set them to 0 it will solve your issue
(everything else is ok);
fiddle
I am creating a grid based landing page with lots of nested columns. Was going well until I completed the load of nested columns and then the next row seems to overlap. In the code below the new container and row appear over the top of the last nested row. I'm sure its something really simple but I can't see where I've gone wrong and would appreciate the help.
<div class="container">
<div class="row">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 panel2">
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel4"></div>
</div>
<div class="row">
<div class="col-sm-12 panel3"></div>
</div>
</div>
<div class="col-sm-8 panel3">
<div class="row">
<div class="col-sm-6 panel2"></div>
<div class="col-sm-6 panel3"></div>
</div>
<div class="row">
<div class="col-sm-6 panel3"></div>
<div class="col-sm-6 panel2"></div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 panel4">
</div>
</div>-->