I am trying to do a very simple two-column layout that is giving me a hard time. I am still learning the art of flex layout so I'm sure there is something simple that I'm missing. I want a vertical list of <div>s, each of which is a flexbox with two child <div>s. The width of first child varies based on content. The second child is flex-grow: 1, and I want those items to left-align across the set of parents. Instead, the first child is sized to content, and the second butts up against it on the right.
#resultsList {
display: flex;
flex-direction: column;
}
.result {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.result-text {
flex: 1;
}
<div id="resultsList">
<div class="result">
<div class="result-line">Line 147</div>
<div class="result-text">Blah blah</div>
</div>
<div class="result">
<div class="result-line">Line 223</div>
<div class="result-text">Resukt 2</div>
</div>
<div class="result">
<div class="result-line">Line 445</div>
<div class="result-text">Quick brown fox</div>
</div>
</div>
I have tried many combinations of align, justify, etc. but I always get the same (or a worse) result.
Okay so:
I think is this what you mean right?
There's a lot of flex going on here so the basic principles are:
main-container holds everything, displaying it as flex. Fixed width of 600px.
sub-container is each flex item, being display as column.
first-container is a fixed width (in this case: 150px) and flex-grow: 1;
content does not have a flex grow property, and so is only the width of its content.
padder has a flex-grow property, so it will take up the rest of the remaining space.
second-container takes up the rest of the container.
The rest is just the use of borders. Where applicable you can make border-{top|bottom|left|right} to none, so it appears as if the box is extended out. Try using the chrome dev tools to see the width of each component.
.main-container {
width: 600px;
display: flex;
flex-direction: column;
}
.sub-container {
display: flex;
}
.first-container {
border: 1px solid black;
border-right: none;
flex-grow: 1;
display: flex;
max-width: 150px;
}
.content {
border-right: 1px solid black;
padding: 10px;
}
.padder {
flex-grow: 1;
}
.second-container {
border: 1px solid black;
border-left: none;
flex-grow: 2;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="main-container">
<div class="sub-container">
<div class="first-container">
<div class="content">
<p>text</p>
</div>
<div class="padder"></div>
</div>
<div class="second-container">
<p>text</p>
</div>
</div>
<div class="sub-container">
<div class="first-container">
<div class="content">
<p>sample text</p>
</div>
<div class="padder"></div>
</div>
<div class="second-container">
<p>text</p>
</div>
</div>
<div class="sub-container">
<div class="first-container">
<div class="content">
<p>more sample text</p>
</div>
<div class="padder"></div>
</div>
<div class="second-container">
<p>text</p>
</div>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
JSFIDDLE
I have a case where I want my bootstrap columns to horizontally center themselves.
To achieve this, I have used the following rules
CSS:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
Then If 4 columns are there they should come in a line. And if there are 3 columns then they should be centered.
HTML:
<!-- The fourth column falls down -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
It works fine if I have just 1,2 or 3 columns but when I get 4 columns, one of the columns falls down to a new line. To solve this issue, I have tried reducing the width to say 24.7%. But again this does not work in all screens. So I have to keep changing the width.
I would love to know why width 25% is not taking the 25% width and falling down. And how to solve this issue and keep them always in the center.
JSFIDDLE
You should create a special class (ie: row-centered) for this case, and not override the Bootstrap grid.
.row-centered > div {
display: inline-block;
float: none;
}
http://www.codeply.com/go/EXmotvfGtG
Please remove:
div[class^=col-] {
float: none;/* Overwrites float left */
display: inline-block;
vertical-align: top;
width: 25%;
}
and you can add to the .row class:
.row {
display: flex;
justify-content: center;
}
If you're using bootstrap v4 there are added flexbox classes, which you can use:
https://v4-alpha.getbootstrap.com/utilities/flexbox/
Give display: flex to the row. Using this method will work in all screens.
Fiddle
div[class^=col-] {
float: none;
display: inline-block;
vertical-align: top;
width: 25%;
}
body {
color: white;
}
.row {
margin-bottom: 50px;
display: flex;
}
.col-1 {
background: red;
}
.col-2 {
background: blue;
}
<!-- The fourth column falls down -->
<div class='row row-1 text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Works Fine and centers the columns -->
<div class='row text-center'>
<div class="col-xs-3 col-1">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
<div class="col-xs-3 col-2">Hi</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;
background:lightgray;width:100%;'>
About this SO Question: <a href='http://stackoverflow.com/q/23502342/1366033'>Bootstrap 3 grid, does it *really* matter how many columns are in a row?</a><br/>
Fork This Skeleton Here <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootrsap 3.0 Skeleton</a><br/>
<div>
I am trying to split my webpage into two vertical columns which can be clicked on to take you to the right pages. I've gotten this far.
HTML
<!-- Choices -->
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-xs-12 vertical-center webd">
<h1 class="text-muted text-center">Web Design</h1>
</div>
<div class="col-md-6 col-xs-12 vertical-center circ">
<h1 class="text-muted text-center">Circus</h1>
</div>
</div>
</div>
CSS
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
.webd {
background-image: url('webd.jpg');
}
.circ {
background-image: url(circ.JPG);
}
My issue is, no matter where I put the text-center class. My <h1>s stay left aligned on the page. Can anybody help?
It is because you have added display flex to the parent container. This means the children are not full width anymore.
If you add the following style, it will fix your error:
.vertical-center > .text-center
{
flex-grow: 1;
}
Example bootply
If you don't want to grow the children, you can just add the following to your vertical center: justify-content: center;
Example bootply 2
I have an image that takes up the fold, below a fixed nav. I Want to vertical align: middle the #fold-text and chevron over the image.
html markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
This CSS below usually works when I want to center one div within another, but not luck on this (maybe because the img height is set to "auto" ? ) . Can anyone tell me how to correct this?
.background-image {
height: auto;
width: 100%;
display: table;
}
#fold-container {
display: table-cell;
vertical-align: middle;
}
#fold-text {
font-size: 1.6em;
font-weight: bold;
background-color: rgba(black, 0.3);
color: white;
display: table-cell;
}
.fa.fa-chevron-down {
z-index: 500;
color:white;
text-align: center;
font-size: 2em;
font-weight: normal;
display: table-cell;
}
Your desired markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
... is not valid HTML. <img> tags don't contain any other markup, so what the browser sees is more like this:
<div class="row">
<!-- note the self closing img tag -->
<img class="background-image" src="images/1400px_splash.jpeg"/>
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
<!-- </img> don't know what to do with this, because img tags close themselves -->
</div>
What you need to do is more like this:
<div class="row">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
<img class="background-image" src="images/1400px_splash.jpeg"/>
</div>
</div>
... and just make sure the appropriate stylings are added to your elements to position them appropriately.
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