I've got Bootstrap3 page, and somewhere halfway is a row with full display height. How do I center the row's content vertically?
I already tried the "vertical-align:center" css property, but that doesn't seem to work (neither does 'middle' instead of 'center').
Here's a small live demo, or as a standalone HTML example:
<!DOCTYPE html><html><head><meta charset='utf-8'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css'>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js'></script>
<style type='text/css'>
.row { color:#ff0; }
.bg1 { background:#007; }
.bg2 { background:#060; }
.special { background:#600; height:100vh; vertical-align:center; }
</style>
</head><body>
<div class="container-fluid text-center">
<div class="row bg1">Top row<br><br></div>
<div class="row bg2">Another row<br>With some content<br><br></div>
<div class="row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="row special">
<h2>Hello</h2>
This should be vertically centered
</div>
<div class="row bg2">And here's yet another row<br><br></div>
<div class="row bg1">The bottom row<br><br></div>
</div>
</body></html>
.row has negative margins for the columns, using without inner col-X-X is going to give you odd results. Read the docs on how to use the grid system.
There are a variety of ways of vertical-align:middle (not center) http://css-tricks.com/centering-in-the-unknown/
DEMO: http://jsfiddle.net/mLopevv8/
READ ME: Make another class for .row, remove .container-fluid, convert the parent of the vertically aligned middle content to a display:table and the child is now a display:table-cell.
CSS
.special { background:#600; height:100vh; display:table;width:100%;}
.v-m {display:table-cell;vertical-align:middle}
HTML
<div class="text-center">
<div class="my-row bg1">Top row<br><br></div>
<div class="my-row bg2">Another row<br>With some content<br><br></div>
<div class="my-row bg1">....Bla bla bla....<br>sadf asdf adsf asdf asdf<br><br></div>
<div class="my-row special">
<div class="v-m">
<h1>Hello</h1>
This should be vertically centered!
</div>
</div>
<div class="my-row bg2">And here's yet another row<br><br></div>
<div class="my-row bg1">-- The bottom row --<br><br>
</div>
</div>
One way is to give the line height to the text which you want to place at the center vertically and horizontally ,but the line height should be equal to the half of the height of the div in which it is being placed.
or
U can check out this link , this might help you:
http://jsfiddle.net/jasongennaro/unfwL/1/
Related
I'm using the w3.css, I wanted to make a colored background with width 100%,
and inside it another box with width 80% which will contain the text, so I used the following:
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%">
test
</div>
</div>
The problem is that the second container with the 80% width is not centered in the page although I used w3-center.
I noticed that w3-center only centers the text, but the container itself isn't centered, so how can I center the container block?
I think this should work.. Try It..
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center" style="width:80%;margin:auto;">
test
</div>
</div>
W3.CSS has no class for centring block elements. The only classes which do that have other effects as well.
You'll need to set the left and right margins to auto yourself.
`<html> <div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-center justify-content-md-center" style="width:80%">
test
</div>
</div>`
This should do the trick.
w3-auto is a container for responsive size centered content.
w3-content is a container for fixed size centered content.
https://www.w3schools.com/w3css/w3css_references.asp
w3-auto is
{
margin-left: auto;
margin-right: auto;
}
I suggest
<div class="w3-container w3-light-green">
<div class="w3-container w3-sand w3-auto" style="width:80%">
test
</div>
</div>
If you want to center the text, use also w3-center, of course.
I don't know much about w3.css there could be a native solution to this but If you prefer hacky way there it is:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container w3-light-green" style="text-align: center">
<div class="w3-container w3-sand w3-center" style="width:80%; display: inline-block;">
test
</div>
</div>
</body>
</html>
https://jsfiddle.net/k2j676ba/
I'm trying to set some divs to width: 100% on Twitter Bootstrap 3 (including no paddings or margins).
JSfiddle: http://jsfiddle.net/rq9ycjcx/
HTML:
<div class="container">
<header>
<div class="row">
<div class="col-md-2">
<img src="http://placehold.it/150x50">
</div>
<div class="col-md-10">Menu</div>
</div>
<div class="row gray">
<div class="col-md-6">
<h1>Page Title</h1>
</div>
<div class="col-md-6">
<div class="breadcrumbs">Main page > page </div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/350x150" />
</div>
</div>
</header>
<footer>
<div class="row">
<div class="col-md-12">Content</div>
</div>
<div class="row dark">
<div class="col-md-3">Footer 1</div>
<div class="col-md-3">Footer 2</div>
<div class="col-md-3">Footer 3</div>
<div class="col-md-3">Footer 4</div>
</div>
</footer>
</div>
What is the right way to get image http://placehold.it/350x150 width: 100%, including no paddings or margins?
Page title and breadcrumbs height is 80px.
If I resize window to smaller screen (e.g. mobile), text Main page > page disappears (it's somewhere but not on own row).
How to fix it?
Use <div class="container-fluid">. As per Bootstrap Docs: Use .container-fluid for a full width container, spanning the entire width of your viewport.
There is 0 padding on container-fluid.
In your code you have what appears to be body content in your header and you also have a div class="container" outside of your header and footer. This is not correct, you should have your container/container-fluid inside of your body. Also for your header you should use <nav="nav navbar-nav">.
Updated Fiddle
As suggested above, you can create a helper class
.padding-0 {
padding: 0;
}
and apply it to any HTML elements for which you need a padding reset. So in your case, it would look like this:
<div class="row">
<div class="col-md-12 padding-0">
<img src="http://placehold.it/350x150" />
</div>
</div>
For the second problem, set height of .gray class to auto :
#media () {
.gray {
height: auto;
}
}
Note: You could also remove line-height: 80px, it's optional :)
http://jsfiddle.net/rq9ycjcx/8/
There is no "right" way to do that in Bootstrap 3. It means you have to reset padding for the exact column.
You can create a class such as this one:
.col-md-12.resetPadding { padding:0px }
About Main page > page disappearing, I don't see this problem on my browsers (tested on Chrome and FF), but you have line-height: 80px there and as you said your breadcrumbs div has height: 80px;, so try to reduce line-height property and see how it works.
A simple way would be to remove the <div class="col-md-12">...</div> and add your content directly inside the row tag. The row tag removes the left & right gutters, whereas the cold-md-12 essentially adds the gutters back in.
The Bootstrap 3 documentation says that for single full width items you don't need any markup, eg just wrap it in <p> tags. However this will show the 15px gutters due to the page markup. So by simply adding in the row tag and placing your content directly inside this you will get 100% width content and be compliant with the BS3 documentation.
I need to add space between grids, without changing .col-md-4 and .col-md-8 style
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">grid2</div>
</div>
I'd suggest you add a new div element inside any of the .col-md-* and give it a padding (or a margin) (Because you can't edit the default Bootstrap files).
<div class="row" >
<div class="col-md-4" style="height:250px;">grid1</div>
<div class="col-md-8" style="height:250px;">
<div style="padding-left: 20px;">grid2</div> <!-- The added div -->
</div>
</div>
Another option is to create a special CSS class and apply it to the rows where you want the wider spacing..
.row.wide-gutter [class*='col-']:not(:first-child):not(:last-child) {
padding-right:20px;
padding-left:20px;
}
Demo: http://bootply.com/110509
Done this a whole bunch of times, but now it's acting out for some reason. Though I'll probably feel very dumb, after somebody points out the mistake.
Live link:
http://soloveich.com/project6
I'm trying to build a header, but getting quite a few problems at the same time
1) Background images for class header and #soc don't show
2) that image with large text does not align to center
3) I get the post on the right side of the header, while it has to be under it.
css is properly connected (tried changing body background color)
header code
<div class="header">
<header>
<div class="row-fluid">
<div class="col-lg-3"><div class="pull-right"><img src="wp-content/themes/greendream/images/logo.png"> </div></div>
<div class="col-lg-6"><div id="text"><img src="wp-content/themes/greendream/images/text.png"></div></div>
<div class="col-lg-3"><div id="soc"></div></div>
</div>
</header>
</div>
css
.header {
background-image: url(images/hdbg.jpg);
}
#text {
width: 578px;
margin:o auto;
}
#soc {
background-image: url(images/soc.png);
}
You need to start by studying how the grid system in Bootstrap 3 works.
Basically, if you want your content centered, you need to place it in a container. Then you set up your rows and columns.
Something like this:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<img src="wp-content/themes/greendream/images/logo.png">
</div>
<div class="col-md-6">
<img src="wp-content/themes/greendream/images/text.png">
</div>
</div>
</div>
</body>
Note: There is no row-fluid in Bootstrap 3. A lot of what you're trying to do will only work in Bootstrap 2.
Twitter Bootstrap Scaffolding section on Fluid layout shows example code which displays as two blue boxes. Using that example, the code below, displays "Sidebar content Body content" but no boxes. What else is needed?
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-iconhttp://twitter.github.io/bootstrap/scaffolding.htmls.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</body>
</html>
If you're trying to see the blue boxes those are just displayed there for reference and to point out how the grid is divided. They are not actually meant to be included in the code. The words Sidebar Content and Body Content are your reference points for where content will be displayed. In order to get some shading you will need to add a CSS class beside your span2 and span10 divs. Here's an example:
<div class="span2 well">
Sidebar content
</div>
The Bootstrap docs have an additional style property show-grid that is used to display a background (boxes) on the span* (columns) inside of rows. The CSS looks like this:
.show-grid [class*="span"] {
background-color: #ddd;
}
and is applied to the rows in the docs like this..
<div class="row-fluid show-grid">
<div class="span2">
Sidebar content
</div>
<div class="span10">
Body content
</div>
</div>
Demo: http://www.bootply.com/68856