I have 2 columns and on the left and the right side, When I open the web page on a small or xs screen the two columns overlap. I would like for the other column to go below the other.
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 area-style"></div>
</div>
</div>
CSS:
.area-style {
border: 1px solid #ccc;
padding-top: 2em;
background: #fafafa;
height: 500px;
}
Please check if you have given floats to the elements inside any of the "col-md-3" or "col-md-9" divs. The Overlapping 99% occurs If the floats are not cleared.
If you are using Bootstrap4 try this.
<div class="container">
<div class="row">
<div class="col-12 col-md-3"></div>
<div class="col-12 col-md-9 area-style"></div>
</div>
</div>
Try this.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9 area-style"></div>
</div>
</div>
Please tell me if this helps you.
Related
I'm trying to get the right div to be on top when viewed on a mobile device using Bootstrap, as explained and answered in this thread, meaning I want my desktop layout to look as follows:
A | B
And my mobile layout as follows:
B
A
However, the proposed following solution isn't working for me:
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
My code looks as follows:
<section id="kalender" class="kalender-section content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8 mx-auto">
B
</div>
<div class="col-lg-8 col-lg-push-4 mx-auto">
A
</div>
</div>
</div>
</section>
But B is still shown on the left on a desktop view.
Any ideas on what I'm doing wrong, and how to fix this? Thank you in advance.
You are using col-lg-push on both div. Use col-lg-pull-4 on your second div "A"
So your new code is:
<section id="kalender" class="kalender-section content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8 mx-auto">
B
</div>
<div class="col-lg-8 col-lg-pull-4 mx-auto">
A
</div>
</div>
</div>
</section>
Working JSFiddle: https://jsfiddle.net/v5a7ommf/1/
Follow below code:
https://codepen.io/hardiksolanki/pen/GOKGOx
Desktop view: A | B
Mobile view:
B
A
This can also possible with out boo-trap.
.desktop-left{
background: red;
float: right;
}
.desktop-right{
background: green;
float: left;
}
#media only screen and (max-width:980px) {
.desktop-right, .desktop-left{
float: none;
}
}
I think it is something simple, but as i'm new to bootstrap I don't know how to do it, I searched and didn't find anything about it.
I want the columns to take 100% the width of the row, I marked the row with a red border in the example below.
I know it's the padding of the columns that give this spacing but I have not figured out a way to remove the padding keeping the spacing between the columns and making them fill the row.
JSFiddle
.box {
height: 100px;
margin-bottom: 20px;
border: 1px solid rgba(0,0,0,0.2);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row" style="margin-top:40px;margin-bottom:40px;border-right: 1px solid red;border-left: 1px solid red;">
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
<div class="col-xl-3 col-md-4 col-sm-6">
<div class="box"></div>
</div>
</div>
</div>
Change your class from container to container-fluid:
<div class="container-fluid">
...
</div>
More about it here
remove class "container. and then try you will get full width row.
To remove the space between columns in you row, in bootstrap 4, you can use no-gutters like this:
<div class="row no-gutters">
...
</div>
Try This
nest row inside row
HTML
<div class="container">
<div class="row">
<div class="row">
<div class="col-*-*">
<div class="products">
.......
</div>
</div>
</div>
</div>
</div>
Link For reference
hope this helps..
you should use 100% of all div width if problem solved well and good otherwise you can use left and right margins in (-) minus.
My goal is to achieve the following image on my page:
I managed to achieve this with the HTML and CSS you can find below, but it doesn't seem very viable, because the sidebar is losing it's physical height because of the position: absolute.
I'm wondering if it's possible to make one row with two columns on the left and a sidebar on the right, without having to use positioning.
I tried position: relative with a negative top, but since the top col-md-9 has a changing height (depending on what is entered), I can't give it a negative top. It'll simply be too static and impossible to maintain.
Changing the order in the HTML doesn't change anything, since the physical height of the sidebar will move the 2nd content down.
.sidebar {
position: absolute;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-9">
Changing content
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
<div class="col-md-9">
More content
</div>
</div>
I use xs columns for this example, but you can change to md in your page.
Firstly create a 9-column and a 3-column div. Then put two divs inside the 9-column one.
.content, .sidebar {
margin: 10px;
padding: 20px;
}
.content {
background-color: navy;
color: white;
}
.sidebar {
background-color: yellow;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row wrapper">
<div class="col-xs-9">
<div class="row">
<div class="col-xs-12">
<div class="content">Content</div>
</div>
<div class="col-xs-12">
<div class="content">Content</div>
</div>
</div>
</div>
<div class="col-xs-3">
<div class="sidebar">Sidebar</div>
</div>
</div>
You can nest col-x-x inside other col-x-x
You just have to create 2 parents: content and sidebar, then add multiple contents into the content parent :
<div class="row">
<div class="col-md-9">
<div class="col-md-12">
Content
</div>
<div class="col-md-12">
More content
</div>
</div>
<div class="col-md-3 sidebar">
Sidebar
</div>
</div>
You cannot have more that 12 columns in a row unless it is not defined in your custom grid.
What you can try is this:
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-md-3" style="position: relative;">
<div class="row">
<div class="col-sm-12 sidebar">
Sidebar
</div>
</div>
</div>
</div
As a solution, you can make sidebar to stay at the right side of screen if you'll make left section overflow: auto.
.sidebar {
height: 100vh;
background: lightgreen;
}
.left-section {
height: 100vh;
background: lightblue;
overflow: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-9 left-section">
<div class="row">
<div class="col-sm-12">
Changing content
</div>
<div class="col-sm-12">
More content
</div>
</div>
</div>
<div class="col-sm-3 sidebar">
Sidebar
</div>
</div>
</div>
I have a div that goes to the edge with the browser and would ilke to add content that is aligned to the centered container in the center of the page. I've crated a row with a col-md-6 that I filled with a background color but when I add the container, the content gets aligned to the edge of the browser not to the container's edge.
I am using Bootstrap and really need your help. If I did not articulate the issue properly, I've attached an image that should help.
Thanks for your help.
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
Image shows the current situation and the desired situation
As you did a margin-top for the .login-msg-box, you could for example add a margin-left to your .container. Here's the result :
.login-msg-box {
background: rgba(0,0,0,0.5);
margin-top: 200px;
height: 400px;
}
.container {
margin-left: 200px;
}
<div class="row">
<div class="col-md-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
You can add any number of offset to div
<div class="row">
<div class="col-md-6 col-md-offset-6 login-msg-box">
<div class="container">
<h2 class="msg-heading-line">LOG IN</h2>
</div>
</div>
</div>
I think you are looking for something like this https://jsfiddle.net/neya0v76/1/
I switch everything to xs so it looks right in the fiddle and just restructered your html
<div class="row">
<div class="col-xs-6 login-msg-box">
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
<h2 class="msg-heading-line">LOG IN</h2>
<input type="text"/>
<input type="text"/>
</div>
</div>
</div>
Hi I'm new in bootstrap and just trying to understand how the grid line works and making boxes on it. I don't know why does the style doesn't take effect.
Here is my code:
<div id="content" class="container">
<div class="row">
<div class="col-md-12 main ">
<h2>Welcome to Dashboard!</h2>
</div>
<div class="col-md-4 sidebar style="background-color: #dedef8;box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444; ">
<h2>Sidebar</h2>
</div>
</div>
</div>
Your HTML is invalid, you should close class attribute quote, and add missing </div> tag. After all you also make sure that total sum of columns is exactly 12 per row. Something like this maybe:
<div id="content" class="container">
<div class="row">
<div class="col-xs-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-8 main ">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
</div>
Demo 1: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview
Here col-xs-4 + col-xs-8 fills 12 column row. col-xs- styles are effective starting from extra small dimensions and higher. You can of course make it more sophisticated, for example you want sidebar to take whole row pushing main content below it for xs devises:
<div class="row">
<div class="col-xs-12 col-sm-4 sidebar">
<h2>Sidebar</h2>
</div>
<div class="col-xs-12 col-sm-8 main">
<h2>Welcome to Dashboard!</h2>
</div>
</div>
Demo 2: http://plnkr.co/edit/YpfBDxXHrmGslzMUjEVh?p=preview