starting from this question Three column Bootstrap layout with left sidebar at bottom I learned about Bootstrap column push and pull.
The snippet below almost works in getting the result I want:
The problem is the resizing the screen, at around 1200px width the two aside elements (blue and green) are one beside the other (you can check the snippet).
Any help?
div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="container">
<div class="content left col-md-7 col-lg-push-2"></div>
<aside class="side1 left col-md-2 col-lg-pull-7"></aside>
<aside class="side2 left col-md-3"></aside>
</div>
It's not a glitch. You're mixing sizes. Your pushes and pulls should be set at the same breakpoint as the column declarations.
div,aside { height: 50px}
.content { background: lightpink;}
.side1 { background: lightblue;}
.side2 { background: lightgreen;}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<div class="container">
<div class="content left col-md-7 col-md-push-2"></div>
<aside class="side1 left col-md-2 col-md-pull-7"></aside>
<aside class="side2 left col-md-3"></aside>
</div>
Related
I'm pretty sure that the problem has some simple solution but I am not able to find one yet other than overriding the bootstrap's default behavior which doesn't seem like a good idea to me.
The issue is simple. When I have this:
#main {
margin-top: 100px;
width: 100px;
background-color: black;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div id="main" class="col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
You can see a black stripe on the screen even though there is not content.
After some inspection/investigation I understood that bootstrap has this default style:
// Prevent columns from collapsing when empty
min-height: 1px;
I've read this Bootstrap min height question and several other posts on the topic so it seems that it is intended to have this style.
However, and I guess this is not something uncommon, I have a page with a search functionality and when the user perform a search and select any of the results, a report should be displayed below the search but until this happens I have several stripes, where the content should be displayed at some point and I would like them to not be visible.
I can think of some JS workarounds, but wonder if it's possible to do this with pure CSS? I can always override the default value of min-height to 0 but I guess the bootstrap guys had a good reason to add this, and maybe there's a known way to avoid displaying stripes with the background color when no content is available.
If you do not feel like overriding bootstrap style, then the :empty selector can be used to remove background
#main {
margin-top: 100px;
width: 100px;
background-color: black;
}
#main:empty {
background: none;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="main" class="col-lg-12 col-md-12 col-sm-12"></div>
</div>
</div>
And idea is to hide it with a small inset box-shadow but you need to pay attention to transparency:
.main {
margin-top: 100px;
width: 100px;
box-shadow:0 1px 0 inset #fff;
background-color: black;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Another idea is to rely on gradient for the background and you can adjust slightly the position:
.main {
margin-top: 100px;
width: 100px;
background: linear-gradient(black,black) 0 1px no-repeat;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
you can also add a border-top transparent and adjust the background-clip
.main {
margin-top: 100px;
width: 100px;
border-top:1px solid transparent;
background:black;
background-clip:padding-box;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="main col-lg-12 col-md-12 col-sm-12">
</div>
</div>
</div>
Bootstrap by default set min-height:1px; on his cols, so you have to set min-height:0px; to avoid this.
I've read quite a few similar questions to mine but none is quite the same or has an answer which works for me.
I'm using Twitter Bootstrap 3. I have two rows, and each row contains a col-sm-12 div, so they're the same width. The content in the first row is wider than its container but I have overflow:auto set on the element containing the two rows so a horizontal scrollbar is displayed and the content can be seen using that, so that's fine.
In the second row I have a div to which I'm applying a jQuery plugin (jqxGrid, for what it's worth). I've set the width option of the plugin to be "100%". The resultant grid's content is also too wide for its container but because of the way the jQuery plugin creates the grid it constricts the grid's width to 100% of its parent's width rather than overflowing.
So what I really need is for the .row elements to all be as wide as the widest overflowing content so that when the jQuery plugin evaluates the width of its parent so as to set its own width, the resultant grid ends up being as wide as the overflowing content in the first row.
I've made a fiddle which I hope will illustrate the problem. I feel that at its heart this is a CSS problem so a pure CSS solution would be excellent, but I doubt that that's possible.
.wrapper {
color: #fff;
padding: 10px;
}
.container-fluid {
background-color: #333;
overflow: auto;
}
.row1 {
background-color: yellow;
}
.row2 {
background-color: orange;
}
.short-content {
background-color: red;
width: 100%;
}
.long-content {
width: 2000px;
background-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="wrapper">
<div class="container-fluid">
<div class="row row1">
<div class="col-sm-12">
<div class="long-content">
Long content
</div>
</div>
</div>
<div class="row row2">
<div class="col-sm-12">
<div class="short-content">
THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
</div>
</div>
</div>
</div>
</div>
To my understanding, wrapping each .col-sm-12 into their own parent .row is a verbose way of having all .col-sm-12 in a single .row container, as .col-sm-12s are always wrapping into a new line.
So, in case your setup allows for removing the intermediate .row tags, the only additional line of css you have to write is float: left; on .row. (In the example below I used the id #custom on .container-fluid to isolate this modification from the rest of your page).
body {
color: #fff;
padding: 10px;
}
.container-fluid {
background-color: #333;
overflow: auto;
}
.row1 {
background-color: yellow;
}
/*.row2 {
background-color: orange;
}*/
.short-content {
background-color: red;
width: 100%;
}
.long-content {
width:2000px;
background-color: blue;
}
#custom .row {
float: left;
}
<div id="custom" class="container-fluid">
<div class="row row1">
<div class="col-sm-12">
<div class="long-content">
Long content
</div>
</div>
<!-- </div> -->
<!-- <div class="row row2"> -->
<div class="col-sm-12">
<div class="short-content">
THe jQuery plugin here is too wide to fit but won't overflow because its width is set to match its parent.
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
I've been given a design that I'm having a lot of trouble building as a responsive site.
I'd like the image to extend to the edge of the browser window, so I've placed it as a background image in the fluid container, with a spacer image. The problem is that once we go mobile, the background image will appear beneath the copy above.
I've tried several other versions of this layout, and nothing works. Hoping someone has a suggestion.
Here's a rough markup.
.test {
background-image: url(http://placehold.it/1600x500 );
background-repeat: no-repeat;
background-position: 50% bottom;
background-size: cover;
padding: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid test">
<div class="container">
<div class="row">
<div class="col-md-6" style="background-color: blue;">left col</div>
<div class="col-md-6"><img src="http://placehold.it/20x500/b0b0b0" alt="spacer"></div>
</div>
</div>
</div>
one way to achieve the responsive effect is to change the background-size accordingly to match the new visualization. That way you can alter from 50% 100% for the desktop version where it's right aligned and to 100% 50% on the mobile version where it fills half the height of the component.
As an example I've created this jsFiddle demo, that goes like this:
The html is pretty much the same:
<div class="container bg-pink">
<div class="row half-bg">
<div class="col-sm-6">
<p class="text-right">
<b>bold text first with some nuances</b> then some normal text to break the line. then some normal text to break the line. then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.
</p>
</div>
<div class="col-sm-6 no-gutter">
<div class="half-holder">
</div>
</div>
</div>
</div>
The CSS (important bits) we define:
/* Image */
.half-holder {
height: 100px;
}
/* Normal */
.half-bg {
background: url('https://maxwelldemon.files.wordpress.com/2012/03/2x1-triangle.png') no-repeat right bottom;
background-size: 50% 100%;
}
/* The media query for responsive */
#media (max-width: 768px) {
.half-bg {
background-size: 100% 50%;
}
}
Hope it helps!
I'm doing a site and I'm starting with the mobile stylesheet first.
But the container-fluid's width isn't the same as the window's width.
What I tried to do to fix this was:
.container-fluid{
width: 105%
}
The problem now is that when I make the window a little smaller, it's still not enough, but when I make the window a little bit bigger, it's TOO MUCH, when I do that a scroll bar appears at the bottom.
100% doesn't work since I already said that it's not the full width of the window.
Here's the entire body from the HTML file:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
and this is the CSS file:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
Bootstrap containers are padded.
.container-fluid {
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto
}
You need to remove the padding.
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- put your override styles here - AFTER you include Bootstrap -->
<link href="style-mobile.css" rel="stylesheet">
</head>
<style>
/* override Bootstrap's container */
.container-fluid {
padding-right:0;
padding-left:0;
margin-right:auto;
margin-left:auto
}
</style>
<body>
<div class="container-fluid">
This text hits the left side of the viewport.
</div>
</body>
</html>
Edited HTML example to include new css link
Edit: Bootstrap 4
#Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."
This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.
<div class="container-fluid px-0">
This text hits the left side of the viewport.
</div>
Try this, wrap all the content inside container-fluid with a bootstrap row class. It should work, thanks.
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
If you just change .container-fluid that won't work because the row and col inside the container all get their own corrections. Try adding full-width to your container-fluid and then adding this:
.full-width { padding-left: 0; padding-right: 0; }
.full-width .row { margin-right: 0; margin-left: 0; }
.full-width .col-md-12 { padding-left: 0; padding-right: 0; }
With Bootstrap 4:
<div class="container-fluid p-0">
<div class="row m-auto">
your content here
</div>
</div>
After a long time of searching and trying out what did it for me in the end was a "w-100" in the "col-xs-12" div tag.
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 w-100">
My content that did not span 100% now with w-100 it does
</div>
</div>
</div>
<div className="container-fluid p-0 m-0 row justify-content-center" >
If you use bootstrap, you can use p-0 and m-0 and they will set the 15px padding from .container-fluid and -15px margin from .row to 0.
I guess there are many ways to do this. in Bootstrap 4, all you have to do is wrap the Container in a Div with Class=Row
<div class="Row">
<header class="container-fluid">
<nav class="navbar navbar-dark bg-secondary">
<h1 class="navbar-brand">Try this out</h1>
</nav>
<header>
</div>
This is the only thing I could get to work, after trying most of these answers.
css:
#mydiv {
margin: 0 -9999rem;
padding: 0.25rem 9999rem;
background-color:#2A2A52
}
html:
<div class="container-fluid px-0">
<div id="mydiv">
<div class="row">
<div class="col-md-12">
<p>YOUR CONTENT HERE</p>
</div>
</div>
</div>
</div>
note: I needed to specify px-0 on the container and wrap the row in a separate div in order for the text to line up horizontally with additional text on the page that was part of a typical container-fluid div.
If none of this works try:
*{margin:0;padding:0}
to remove the padding/margin that might be overlapping on your code. It worked for me, since adding a row wrapping the container-fluid created a horizontal scroll on my page.
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