I've got a fairly simple Bootstrap 3 based layout where I want the main element (a central div) to expand or contract vertically to fill the available space as the browser window is resized, but allowing for a couple of elements below that, so that the height of all the elements neither overflows the window height (thus causing a scroll bar to appear) or underflows (thus wasting visible vertical space in the window).
Closest I can get to achieving this is as follows. Problem is that the ".90-height" class (height: 90%) either leads to slightly too little or slightly too much total height for all the elements, depending on vertical window size.
CSS:
.full-height { height: 100%; }
.90-height { height: 90%; }
.doborder { border: 1px solid; border-color: #ddd; border-radius: 4px; }
.controlsdiv { display: table; width: 100%; }
HTML:
<html class="full-height">
<body class="full-height">
<div class="navbar navbar-fixed-top" style="min-height:20px !important;">
<div class="container-fluid full-height">
<div class="row 90-height">
<div class="90-height"> <-- Main column -->
<div class="doborder full-height">
<-- Content here -->
</div>
<div class="controlsdiv">
<-- Couple of controls in here -->
</div>
</div> <-- End main column -->
</div> <-- End row -->
<footer style="margin-top: 30px;">
<span>Some text</span>
</footer>
</div> <-- End container -->
</body>
</html>
Only thing is I can't simplify this structure at all - i.e. remove any of the elements as I need them all for various things.
There are a few different ways you could approach it. Also reminder that CSS class names shouldn't start with numbers. You could use CSS calc() to subtract the height of the footer from the body. You only need to use height-90 once on the main container.
CSS calc() Demo http://www.codeply.com/go/mbXpavYiV8
.height-90 { height:calc(100% - 50px); }
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header"><a class="navbar-brand" href="#">Brand</a></div>
<ul class="nav navbar-nav">
<li>Link</li>
</ul>
</div>
<div class="container-fluid height-90 bg-info">
<div class="row">
<div class="">
</div>
<div class="controlsdiv">
</div>
</div>
</div>
<footer style="margin-top: 30px;">
<span>Some text</span>
</footer>
Another solution is to use flexbox..
.full-height { display: flex; flex-direction: column; height: 100%; }
.fill-height { flex-grow: 1; width: 100%; }
Flexbox Demo http://www.codeply.com/go/tFUf5XFe29
Related
I am looking at achieving the below image. I am not really sure on how to get the css working for the below structure. Should I be making DIV2 absolute?
I want the nav, div1 and div2 to occupy full height of the broswer.
My HTML skeletal is as follows.
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div>
DIV 1
</div>
<div>
DIV 2
</div>
</div>
</div>
</div>
</body>
Set <html> and <body> to have 100% height, then set height on the divs to however large you want them to be (say 80%), as well as the container for the divs. Percentage height is based on the parent of the element.
I have provided a non-bootstrap answer, to help you understand the flexbox.
Setting the parent container to full height is the first step.
.container{
display: flex;
height: 100vw;
flex-direction: column;
}
Then by using flex: 1; we allow the children to take all the available space.
Last step is to limit the max-height of the second child by using max-height.
Working example here
Here you can find the CSS styles based on your HTML structure. The code is not responsive but it will give you an idea on how to go about solving your own problem.
body {
margin: 0;
}
.navbar {
background: blue;
height: 50px;
}
.container-fluid .row .col-md-6 {
max-width: 60%;
margin: 0 auto;
display: flex;
flex-direction: column;
// 50px is height of the navbar so subtracting it from total height
height: calc(100vh - 50px);
}
.col-md-6 > div {
display: flex;
justify-content: center;
align-content: center;
font-size: 30px;
}
.col-md-6 div:first-child {
flex: 1;
min-height: 400px;
/*Setting minimum height so height of div will not go below 400px otherwise it will get smaller than div2 due to flex:1
flex: 1 takes 100% of height - 50px - 100px
*/
background-color: red;
}
.col-md-6 div:last-child {
height: 100px;
background-color: green;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div>
DIV 1
</div>
<div>
DIV 2
</div>
</div>
</div>
</div>
Do not use bootstrap grid.
Use flexbox.
Parent div must have 100% height, display: flex and column direction. Think that way.
you have to use container class instead of container-fluid to have div centered on page
her the code
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
DIV 1
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div>
DIV 2
</div>
</div>
</div>
</div>
for height you can use vh css unities OR use Felxbox and if you chose this second solution probably you can use V4 of BS
I've just started coding my first bootstrap website and after looking around still didn't manage to find a solution. It is my first time posting on stackoverflow so hopefully this questions makes sense for other people too.
I'm looking to make my footer 100% wide while centering the content with CSS.
<footer class="container">
<div class="row">
<nav class="col-sm-3">
<p>1</p>
<p>2</p>
<p>3</p>
</nav>
<nav class="col-sm-3">
<h3>Plan du Site </h3>
<table style="">
</table>
</nav>
<nav class="col-sm-3">
<h4>some H4</h4>
</nav>
<nav class="col-sm-3">
<h3>some h3</h3>
</nav>
</div>
</footer>
CSS I have so far:
footer{
background-color: #3D383D;
padding: 15px 100px 15px 100px;
min-width: 100%;}
body > footer > div {
align-content: center;
width: 100%;
}
Use bootstrap class text-center for centering content inside a div, and change container class on footer to container-fluid. Furthermore remove these lines from you css because they are not necessary:
body > footer > div {
align-content: center;
width: 100%;
}
As the class .container has a set width, you cannot make it 100% of the viewport unless forcing it to. Use the class .container-fluid
http://getbootstrap.com/css/
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I have a bootstrap webpage with header and footer and I would like to set a background image for the div in between.
My goal is that the background image could cover all area between header and footer (div id=xx in code below) while I don't need to hard coded height and width, but failed.
Can you please help?
<body>
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" style="background:url(images/background.jpg) no-repeat;background-size:940px 500px;height:500px;width:940px" title="KnowSG" align="left" id="hplogo">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
CSS
html, body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by it's height */
margin: 0 auto -50px;
}
#push {height: 50px;}
.footer {
bottom: 0;
width: 100%;
height: 50px;
background-color: #f5f5f5;
padding-top: 15px;
}
.footer > .container {
padding-right: 15px;
padding-left: 15px;
}
Okay I cleaned your code up a bit. You had 2 id attributes on the same element which you shouldn't do. and I added a class.
<div id="wrap">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<center>
<div id="xx" title="KnowSG" align="left">
<h3>"From beginning of 2016, it is mandatory that employers must issue payslip to employees."</h3>
<h3 style="color:red">"Penalty is SGD 1000 for first month and SGD 2000 for subsequent months."</h3>
</div>
</center>
</div>
</div>
<div id="push"></div>
</div>
<footer class="footer">
<div class="container">
<center>
</center>
</div>
</footer>
#xx {
background-image: url('http://placehold.it/1920x1080.gif');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
Is it possible that your background image is either not where you think it is, or missing? Quick test: in a new browser window: http://yourdomain.com/images/background.jpg (using the file / dir names from your question code)
This might be the problem: Note also that if you have an external stylesheet (in your example you styled the #xx div using inline html attribute), and if that stylesheet is in a subfolder, such as /css, you must do this (because the images folder is not directly underneath the css folder):
background:url(../images/background.jpg) no-repeat; /* Note the ../ prefix */
I created a jsFiddle and substituted the placeholder website placekittens.com for your hard-coded image - it works fine.
jsFiddle Demo
Observations:
If you want the background image flush up against the header and footer, you must make these adjustments (as I did at top of the jsFiddle's CSS):
.container-fluid h3 {margin:0;}
.navbar {margin:0;}
You can do this if you want the bg image flush up against the header, but not the text:
.container-fluid h3 {margin:0;padding:50px;}
At the moment my html page has 2 divs that hold all the information on the page one underneath the other. Now I want there to be a side bar to the left of them spanning down the entire page.
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
I would normally do this using the bootstrap grid template, however I am using an angular drag and drop library and using that (for some reason) messes up the animations when things are being moved around.
What would be the easiest way of adding in another div to act as a side menu always to the left of the two divs shown?
You can do something like this:
.sidebar {
background: #eee;
width: 100px;
height: 50px;
margin-right: -100%;
margin-bottom: 10px;
position: relative;
display: block;
overflow: visible;
float: left;
box-sizing: border-box;
}
.page-content {
background: #aaa;
margin-left: 100px;
}
<div class="container">
<div class="sidebar-wrapper">
<div class="sidebar">
SIDEBAR<br>
AT LEFT;
</div>
</div>
<div class="page-content-wrapper">
<div class="page-content">
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 1</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading">Group 2</div>
<div class="panel-body">
<div class='contentWrapper ng-cloak'>
<div class='content'>
<ul class="thumbnails">
<p>
content
</p>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Trade-offs of this approach:
You need to put a fixed width to your sidebar (either by px, %, or anything)
You need either to have a fixed height or to let the sidebar has the height of the content (you can't put height: 100%;)
You can float a sidebar left, but to have it fill the page’s full height all its ancestor elements must have height: 100%. If .sidebar is directly under body, these styles will do it:
html, body, .sidebar { height: 100% }
.sidebar { float: left }
Sample, with tinted backgrounds to show block outlines.
I m not sure I understand entirely the question so I ll try to answer.
I would create a div with float left css to have a nav within for your left menu and if it has to be all along the page . And another div either float right or none to keep the 2 divs you created.
You can use flexbox (adjust your needs)
CSS
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row nowrap;
flex-flow: row nowrap;
}
.flex-item {
-webkit-flex: 1 auto;
flex: 1 auto;
}
DEMO HERE
Wrap it all in a container with
display: table;
width: 100%;
table-layout: fixed;
then create a sidebar div with
display:table-cell;
vertical-align:top;
width:35%;
and wrap your content in a container with
display:table-cell;
vertical-align:top;
width:100%;
make sure your side bare is above your content for it to be on the left.
and that's you a flexible grid with a sidebar.
You can use col-md-3 and col-md-9 for sidebar and content respectively. Fix the sidebar using position: fixed
BootPly Demo