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>
Related
I created a custom-class CSS class which I applied in the col div. That column contains dynamic images, which is why I used a vertical scrollbar.
On a desktop, it displays correctly. However, in mobile view it is broken or exceeds a row or section.
How can I apply vertical scrollbar that will not affect col in mobile view?
In short my overflow floating over the screen in mobile view.
.custom-class {
position: absolute;
overflow-y: auto;
height: 350px;
-webkit-overflow-scrolling: touch;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-xl-12">
<section class="py-5 header">
<div class="container py-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="tab-content">
<div class="col-md-12">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-5 p-0">
<div class="col-md-12 custom-class"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
Answer was so simple. removing absolute position worked for me. Absolute position disturb in mobile view.
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.
I'm trying to make a grid-layout with BS4.
This is how it looks right now:
My grid-layout
This is what I'm trying to achieve: grid-layout I want
The problem I have is that my sidebar is starting at the same place as main content. I want it to start from the top along with the navbar. I know you can do this if you nest navbar and main content into the same column, but I don't want that since I'm going to make navbar into a partial.
HTML:
<div class="container">
<div id="wrapper">
<div class="row">
<div id="navbar" class="col-md-8">
Navbar
</div>
<div id="main" class="col-md-8">
Main Content
</div>
<div id="sidebar" class="col-md-4">
Sidebar
</div>
</div>
</div>
</div>
CSS:
#wrapper{
height: 200px;
width: 400px;
}
#navbar{
background-color: yellow;
height: 50px;
}
#main{
background-color: blue;
height: 200px;
}
#sidebar{
background-color: red;
}
JSfiddle link
You should try to group columns by putting navbar and main-content in one column and the second column for sidebar.
<div class="row">
<div class="col-8 col-md-8">
<div id="navbar" class="col-md-12">
Navbar
</div>
<div id="main" class="col-md-12">
Main Content
</div>
</div>
<div id="sidebar" class="col-4 col-md-4">
Sidebar
</div>
</div><--row-->
working fiddle
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>
I have the following code:
<div class="col-xs-12 fixedContainer">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Smith Service</h1>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" ng-controller="ServiceStatus as serviceStatus">
<!--Iterates over the services-->
<div class="col-lg-3 col-md-6" ng-repeat="service in serviceStatus.services">
<server-status name="service.name" status="service.status" nodes="service.nodes"></server-status>
</div>
</div>
</div>
</div>
<ng-view></ng-view>
I want to fix the div that has the fixedContainer class always on top. Inside ng-view there is a table, with scrollable data.
I define fixedContainer class as:
.fixedContainer {
position: fixed;
z-index: 1030;
top: 0;
}
but ng-view stay below the container, something is missing.
Can you help me?
Thanks.