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>
Related
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
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 am trying to center the first column in the middle vertically , for the mobile mode xs:
<div class="row toplineheight vcenteritems totalblue visible-xs">
<div class="col-xs-6 vcenteritems small">Your order</div>
<div class="col-xs-3">
<div class="col-xs-12"><span class="tiny">Upfront</span></div>
<div class="col-xs-12 dollar large middle">0</div>
</div>
This is my css(bootstrap 3):
.cart {
.verticalline {
border-left: thin solid #f7f7f7;
}
At the moment the 'your order' text stays stuck to the top of the div. How can I align this in the center?
Codepen here: codepen
using the class visible-xs on your .row element is overriding your display:flex css value. Moving the class to a containing element
CODEPEN
HTML
<div class="cart">
<div class="visible-xs"> <!-- move visible-xs class to a parent container -->
<div class="row toplineheight vcenteritems totalblue">
<div class="col-xs-6 vcenteritems small">Your order</div>
<div class="col-xs-3">
<div class="col-xs-12"><span class="tiny">Upfront</span></div>
<div class="col-xs-12 dollar large middle">0</div>
</div>
<div class="col-xs-3">
<div class="col-xs-12"><span class="tiny">Monthly</span></div>
<div class="col-xs-12 dollar large middle">0</div>
</div>
</div>
</div>
</div>
I want my date picker to be in the middle of the page, eg. the line where I have: <div class="center-block text-center datepicker"></div>
Obviously center-block and text-center I tried already - but neither change anything. And with the offset it just makes it close to the centre without being perfectly centre aligned.
What do I need to do?
Thanks
<div class='row'>
<div class='col-sm-12'>
<div class='page-header page-header-with-icon mg-t'> <i class='fa-icon-calendar'></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
Try something like this:
<div class="col-sm-12">
<div class="datepicker"></div>
</div>
Then give the date picker something like:
.datepicker {
display:inline-block;
margin:0 auto;
}
I haven't tested this, but it would be where I would start.
style="text-align:center;" shall do the trick no? I tested and for me, the "CALENDAR" text is centered
<div class="col-sm-12">
<div class="page-header page-header-with-icon mg-t" style="text-align:center;">
<i class="fa-icon-calendar"></i>
<h2>Calendar</h2>
</div>
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="center-block text-center datepicker"></div>
</div>
</div>
</div>
</div>
This is what should solve your problem. Add it somewhere in your custom stylesheet and change the width % to what suits your design.
.datepicker-inline {
width: 20%;
}