The idea is that certaint section of the page have two color by column:
[ Column left color red ] [ Column right color green ]
So basically the html right now looks like this.
<section id="foo">
<div class="wrapper-content">
<div class="col-sm-5 bg-red">Some content</div>
<div class="col-sm-7 bg-green">Some Other Content</div>
</div>
</section>
That gives me how I need it to look, full width 2 columns with different colours, the problem is the container.
First image is what I need
Second image is what I'm getting
Following code is not working at all....
<section id="foo">
<div class="wrapper-content">
<div class="col-sm-5 bg-red same-height"></div>
<div class="col-sm-7 bg-green same-height"></div>
<div class="container absolute">
<div class="col-sm-5">Some content</div>
<div class="col-sm-7">Some Other Content</div>
</div>
</div>
Colour on the left hast to go all the way left, the colour on the right all the way right, bu the content has to stay center and between the two columns.
Any ideas?
You have to add a container class to your content section too.
Or put your content section into the header wrapper div.
Example: If your header div is wrapped with a class <div class="container">...</div>, also wrap the content div with this class too.
Sample 1: if you want different sections for both header and content
<div class="container">
<div>Header</div>
</div>
<div class="container">
<div>Your content section</div>
</div>
Sample 2: if you dont need header and content sections to be separated
<div class="container">
<div>Header</div>
<div>Your content section</div>
</div>
This may work. You have to put divs of the same background color behind your foreground divs, absolutely positioned.
The container doesn't restrict the size at small widths, so you may have to expand the snippet to full page to see the results (the black borders are there to show the boundaries of your content areas)
.header {
background-color: beige;
margin-bottom: 20px;
}
.main-content {
position: relative;
}
.left-bg {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 50%;
background-color: #dddddd;
}
.right-bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 50%;
background-color: #aaaaaa;
}
.left-fg {
background-color: #dddddd;
border: 1px solid black;
padding: 30px 0;
}
.right-fg {
background-color: #aaaaaa;
border: 1px solid black;
padding: 30px 0;
}
<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.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="header">Header</div>
<div class="main-content">
<div class="left-bg"></div>
<div class="right-bg"></div>
<div class="container">
<div class="row">
<div class="left-fg col-xs-5">Hello</div>
<div class="right-fg col-xs-7">Goodbye</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
This question already has answers here:
Bootstrap Center Vertical and Horizontal Alignment
(17 answers)
Closed last year.
I have a problem with my CSS. I have a panel form in my index page and I want to move it in the middle of the page vertically and horizontally. But I don't know how to create a CSS for this.
Here's my sample code:
<div class="login_header"></div>
<div class="container" style="text-align: center;">
<div class="col-md-6 col-md-offset-3">
<div class="panel_form panel panel-default">
<div class="panel-content">
<h1>test</h1>
</div>
<div class="panel-footer">
<p>test</p>
</div>
</div>
</div>
</div>
<footer class="footer"></footer>
I have a CSS like this:
.login_header { min-height: 50px; background-color: #f5f5f5; }
.panel_form {
/* I don't have an idea with this */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
}
I am not good enough in CSS that's why I need your help. That's all thanks.. :)
Bootstrap 4:
<div class=" h-100 d-flex justify-content-center align-items-center">
<div>
Items are Centered horizontally and vertically
</div>
</div>
JsFiddle
Some of the other answers on this question use CSS hacks with tables and custom CSS classes. As the poster asked "How to center vertically and horizontally using Bootstrap", here is how to do that using only Bootstrap 4 utility classes:
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
Something of note is that due to the styling on the parent div, when adding additional elements in the same div, they will appear beside the first one, rather than below it. To fix this, just add an additional div inside the parent to reset the styling.
<div class="d-flex justify-content-md-center align-items-center vh-100">
<div>
<p>Content 1</p>
<p>Content 2</p>
</div>
</div>
This does work with Bootstrap flex, I've found that it works best when placed inside a flex component like this, rather than wrapping the entire row.
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 1</p>
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Content 2</p>
</div>
</div>
</div>
</div>
Here is a breakdown of each class:
d-flex: Effectively display: flex, allows the div to grow or shrink depending on the amount of content.
justify-content-md-center: Justifies content in the center of the page, can also be replaced with justify-content-sm-center or justify-content-lg-center to change the breakpoint.
align-items-center: Centers the alignments of all items in a div.
vh-100: Sets the height of the div to 100vh, or 100 "vertical height". This ensures that the div is the correct height to allow for vertical alignment.
I found some of the answers very difficult to implement. However, this question seems to be one of the most basic ones and so here's an answer that someone else like me might find useful.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
hello world!
</div>
So, check this out; it's pretty cool
HERES A CODE PEN TO SEE IT IN ACTION
html, body 100% width and height;
container with relative or fixed positioning with 100% width and height, if you want to center in viewport. Size doesn't matter if you just want to ceter it within the element.
centered thing needs absolute positioning, a top and left of 50%, then use transform: translate(-50%, -50%);
regardless of its size, it's centered in viewport
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
}
#outer #container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
LESS version
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#outer {
position: relative;
width: 100%;
height: 100%;
background: #BADA55;
#container {
background-color: #f3f3f3;
color: #663399;
padding: 15px 25px;
width: 100%;
max-width: 300px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;top: 50%;
}
}
What worked for me is this:
<div class="container h-100">
<div class="d-flex justify-content-md-center align-items-center vh-100">
<p>Your Content</p>
</div>
</div>
Asked and answered here: Twitter Bootstrap - how to center elements horizontally or vertically
But the short of it is:
<div class="center-block">...</div>
Link to the Bootstrap docs: http://getbootstrap.com/css/#helper-classes-center
Brothers check this one it's working...
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
**<div class="container" style="display: flex; justify-content: center; align-items: center; height: 100vh">
<div class="jumbotron">
hello world!
</div>**
</div
</body>
</html>
While I haven't found a solution to the general problem in pure Bootstrap 5, here is a solution that works with just a little additional CSS. Please test by changing the browser window size, or using the Responsive Mode of your browser, but not both at once, since they don't behave well together.
This example centers a 50% wide and high div, and centers the text inside it.
It works perfectly down to about a 200px by 200px window.
See Code Pen https://codepen.io/david263/pen/eYvOGOB and use Settings > Full screen mode.
<style type="text/css">
/* Required for proper centering */
html, body{
height:100vh;
width:100vw;
}
</style>
<!-- Outer container, full page width and height, red border -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="height:100vh; overflow:hidden; border: 2px solid red">
<!-- Inner row, half the width and height, centered, blue border -->
<div class="row text-center d-flex align-items-center" style="overflow:hidden; width:50vw; height:50vh; border: 1px solid blue">
<!-- Innermost text, wraps automatically, automatically centered -->
<h2>Center This Text (Even if Wrapped) in all Viewport Sizes</h2>
</div> <!-- Inner row -->
</div> <!-- Outer container -->
Give the outer div
display: table;
and the inner div
display: table-cell
Then you can use
vertical-align: center
on the inner div
Read further: Twitter Bootstrap - how to center elements horizontally or vertically
I'm looking for the classic page layout:
Header 800 Pixel, Navi (left) 200 Pixel, Content (right) 600 Pixel
Is it possible to put this in 3 DIVs only?
<div id="header">Header</div>
<div id="navi">Navi</div>
<div id="content">Content</div>
Because every layout I've found so far is built this way:
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Thanks!
Roman
You surely can do it the way you told.
The thing is that code :
<div id="header">Header</div>
<div id="panel">
<div id="navi">Navi</div>
<div id="content">Content</div> <!-- position absolute left:200px -->
</div>
Will be easier to make and maintain. For example, you just need to specify a single margin-top on #panel to control margin between header and nav+content. With your code, you'll have to specify it twice, on #navi and on #content.
Don't think it's too complex-- just set the header to width 100%. Check it out: http://jsfiddle.net/ASy67/
<div id="header"></div>
<div id="left"></div>
<div id="right"></div>
And the CSS:
div {
height: 100px;
}
#header {
background: #f00;
width: 100%;
}
#left {
background: #0f0;
float: left;
width: 200px;
}
#right {
background: #f0f;
width: 600px;
}
With this example, the content does appear behind the left sidebar. You can fix it by either adding float: right; to the #right, or padding-left: 200px; to #right.
Currently having issues trying to get these bordered text boxed to stay aligned with the above images in a way that when I re-size the page they stick with their prospective images. Currently I have them forced to stick under the images with margin css but once I re-size the boxes, the boxes all flee under the images.
EDIT: Updated code - still having similar issues but this looks more promising - attaching photo of current state.
<body>
<div id="container">
<div id="header">
<img class="leaf" src="images/freshleaf.png" height="150px" alt="freshtext"/>
<!--<button class="navbutton"> <strong> TEST </strong> </button>-->
</div>
<div id="body">
<div id="main" class="">
<div class="column">
<img class="smart" src="images/phone1.png" height="500px" alt="phone1"/>
<div class="box1"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone2.png" height="500px" alt="phone2"/>
<div class="box2"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
<div class="column">
<img class="smart" src="images/phone3.png" height="500px" alt="phone3"/>
<div class="box3"> <h3>Pie is tasty Mmmmm...</h3> </div>
</div>
</div>
</div>
</div>
#body{
text-align: center;
}
#header {
padding-bottom: 50px;
text-align: center;
}
#main{
margin: 0 auto;
text-align:left;
width: 770px;
}
.column{
float:left;
padding-left: 10px;
}
.column:first-child {
padding-left: 0px;
}
.box1{
border: dotted;
border-color: gray;
padding: 2px 5px 2px 5px;
max-width: 250px;
text-align: center;
}
img.smart{
margin-left: auto;
margin-right: auto;
}
wrap each image and the coresponding text in one container and set float:left in the css. get rid of the #textboxes div. then center your #main div by setting it to the width of all the images (plus padding - if desired).
see example fiddle with all the code:
http://jsfiddle.net/QLvt7/4/
I've searched high and low and cannot find a solution specific to this problem. I'm trying to accomplish the following:
Have a container DIV defined with a percentage height to serve as max-size container
A secondary container DIV that provides a content size-based borde
Have a header div that is fixed at the top of that DIV
Have a list of DIVs (table-like) under the header
When the list is short, the border is reduced to size of content
When list if long (> height of outer container), scrollbar is shown for DIV list and not header.
I put together the following simplified version:
<html>
<head>
<style type="text/css">
.panel { height: 10%; border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; }
.header { border-bottom: 1px solid black; }
.scroll { max-height: 100%; overflow: auto; }
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>
The two red boxes should be fixed size. Check
The blue box should size to be the size of the content or size of red box maximum. Check
When contents in lower exceed red box size, scrollbar should be displayed under header. Fail
Any change I make that gets the scrollbar displayed causes the top blue box to enlarge to the size of it's container, red box. e.g., { .scroll height: 100% }
(The DIV.wrap does have a purpose - just not in this example. It is intended to provide a double-border effect on the sizer, so it should be the same size as sizer all the time).
Also, I have figured out some solutions where I used fixed (px) sizes for the DIVs, but this is not necessarily desired. Especially on DIV.panel - this must be set to a percentage height.
Not completely sure i understand the question, but if you want the scroll on the list but not on the header, have you tried:
overflow-y:scroll;
on the "scroll" div instead of
overflow:auto?
Let me know
Ok i think maybe i worked it out. I think cause you have overflow:hidden and a height on the container div, and not the variable scroll div. Just try the code below and let me know. I have added the height of 10% to the scroll div and not the overall container. Hope thats what you were looking for
<html>
<head>
<style type="text/css">
.panel { border: 1px solid red; overflow: hidden; margin-top: 10px; }
.sizer { max-height: 100%; border: 1px solid blue; display:block;}
.header { border-bottom: 1px solid black; }
.scroll { height: 10%;overflow-y: scroll; display:block; }
.scroll div {display:block; line-height:normal; clear:both; height:20px;}
</style>
</head>
<body>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
</div>
</div>
</div>
</div>
<div class="panel">
<div class="sizer">
<div class="wrap">
<div class="header">Header</div>
<div class="scroll">
<div>Line1</div>
<div>Line2</div>
<div>Line3</div>
<div>Line4</div>
<div>Line5</div>
<div>Line6</div>
<div>Line7</div>
<div>Line8</div>
<div>Line9</div>
<div>Line10</div>
<div>Line11</div>
<div>Line12</div>
</div>
</div>
</div>
</div>
</body>
</html>