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
Related
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/
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 am using Zurb Foundation 5 to build a site. My site has a navigation panel against the left side of the screen. When open, I want the nav area to take up 3 columns. The actual content will take up the remaining space. Here is the HTML I have thus far:
<body>
<div style="width:100%; max-width:100%; height:100%;">
<div id="navDiv" class="large-3 columns" style="background-color:#2D2D2D;height:100%;">
<!-- Nav Items Go Here -->
</div>
<div class="large-9 columns">
<!-- Main Content Goes Here -->
</div>
</div>
</body>
Each nav item has an icon and some text. I need to be able to collapse the navDiv in a way that it shrinks down so that only the icons are showing. The text goes away. At the same time, I need the main content area to grow to take up the space that was used by the nav area. I cannot figure out how to do this in the realm of zurb. From what I can tell, the grid is not dynamic. Is it possible to do what I'm trying with a grid? If so, how?
THank you!
If you want to use Foundation (with jQuery dependency) and no other add-ons, you can use a jQuery event handler to toggle the classes used by Foundation. It feels like a hack, but it works.
HTML
<body>
<button>Toggle sidebar</button>
<div class="row">
<div id="navDiv" class="small-2 medium-1 columns">
<img src="http://dummyimage.com/48"><span>Item 1</span>
</div>
<div id="content" class="small-10 medium-11 columns">
<!-- Content goes here -->
</div>
</div>
</body>
CSS
.small-2 span {
/* Hide text when sidebar is small */
display: none;
}
JavaScript + jQuery
$(function() {
$('button').click(function() {
// Resize sidebar
var navDiv = $('#navDiv');
navDiv.toggleClass('small-3');
navDiv.toggleClass('small-2');
navDiv.toggleClass('medium-2');
navDiv.toggleClass('medium-1');
// Resize content
var content = $('#content');
content.toggleClass('small-9');
content.toggleClass('small-10');
content.toggleClass('medium-10');
content.toggleClass('medium-11');
});
});
Demo on Plunker
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.
The code below is from W3CSchool example:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
You can copy the code and paste it to the editor below:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
I have already specified the width of "menu" to 20% and "content" to 80%, why at the right side of "content" has a blank area?
It will only align properly if I add "float:left" in the css style of "content". I can't understand why it behave like that. Anyone can explain?
Thanks for help.
This is because the width of the container for menu and content is set to 500px.
Set it to 100% if you want it to take the whole page:
<div id="container" style="width:100%">
Also if you want the content to simply take all the remaining space, don't assign it a width:
<div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>
Here's the full working code:
<!DOCTYPE html>
<html>
<body>
<div id="container" style="width:100%">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>
<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>
</div>
</body>
</html>
There is blank area at right of page because your floating div is overlapping your content div because floating divs always float above the other divs (Try removing background-color of menu to see example). When you apply float right/left to your content div, it also floats with menu div hence occupies all the space.
please refer to This site
for more information on float.
Thank you,
DIVs are block elements. This means that 2 DIVs are displayed one bellow another, if not use float , position:absolute;, or inline.
if you use 'float' style express this div present external for 'inline' and present inside for 'block',and will affect the back of the element. so if content right display you can use 'float:left;width:80%' and 'float:left;width:80%'. In fact, this is 'display:inline-block', but according to my experience, it will produce the browser bug.