I have seen a number of questions about divs that take up 100% of the screen, but none quite match the requirements I have. I guess the closest would be:
How to have multiple columns that consume 100% height using twitter bootstrap?
The problem with this one is it doesn't use twitter bootstrap conventions, and I also have some extra div nesting.
A relevant code snippet is here:
<!-- Standard bootstrap fixed header -->
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- here is the interesting section -->
<div id="app-container" class="container-fluid" style="background-color: red;">
<div id="app" class="row-fluid" style="background-color: blue;">
<div id="menu" class="span2" style="background-color: green;">
Menu
</div>
<div id="content" class="span10" style="background-color: purple;">
Content
</div>
</div>
</div>
And a link to the jsFiddle: http://jsfiddle.net/djMJX/18/
What I need:
The container-fluid div (#app-container) should reach to the bottom of the page
There should be no extra scrolling caused by the top navbar
content should also reach the bottom of the page. If the content is longer than the page, #app-container and #content should stretch so that the content is contained within
I have tried various variations of setting heights and min-heights to 100%. The problem seems to arise from the extra row-fluid. I have come close where all divs reached the bottom of the page, and it looked fine when the content was short enough, but it fell apart when the content exceeded the height of the page.
I appreciate any help I can get. Thanks!
We have recently started using Bootstrap, however as a web app we encountered difficulty in using the grid system with 100% height. Our solution was to supplement the Bootstrap grid with some helper css classes that utilise the Flexible Box Layout module.
This is the abstract from the specification:
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Here are some further details...
CSS Flexible Box Layout Module Specification
Introduction and Tutorial
However the specification is only at the Candidate Recommendation stage, so it's still quite new. You will also need to consider browser support...
Can I Use Flexbox
There is a polyfill available if you do need to support older versions of IE:
FlexieJS
Related
I am using bootstrap collapse class in a list of divisions.
but collapsing division goes under the bottom item.
It needs to resize browser after collapse to work well.
<div>
<div class="footer-co-src row">
<div class="col-lg-3 col-sm-3 details-fly">
<a class="collapsed" data-toggle="collapse" aria-expanded="true" aria-controls="collapseDetails-1" data-target="#collapseDetails-1">Button</a>
</div>
</div>
<div class="collapse row" id="collapseDetails-1">
<div class="card card-body"> sth to show
</div>
</div>
<div>
I have multiple of these divs, but showing div will be under the next item.
there is no bug in this piece of code. You are probably using some JS library that changes position type to position:absolute or position:fix.
Check any list managing JS/Jquery source on your whole page.
Check the css position:fixed is coming from which library. You can check in inspect elements. And then use this stylesheet library before the bootstrap library in html.
In some cases the bootstrap navbar-fixed-bottom will overlap other content without displaying a scrollbar.
For example https://jsfiddle.net/m5vgd9g7/1/:
<div>
<a class="btn btn-primary" href="#">
Button
</a>
</div>
<div class="navbar navbar-default navbar-fixed-bottom"
style="padding-bottom:0px; min-height:0px">
bottom
</div>
If you make the display pane very short vertically, the text "bottom" overlaps the button:
How can the overlap be prevented, so a vertical scrollbar appears before they overlap?
You should add a class to your top div which is row, so your top html would look like
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
This will add you a scrollbar for your content vertically. But when we declare a fixed navbar you should keep in mind to add a padding/margin to the rest of the content to the size of the navbar, which should display the rest of the content without being intruded by the navbar. So your final html for the top div would look like,
<div class="row" style="padding-bottom:15px;">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
Note: I would never use inline styles as it would complicate the html in the long run and hard to debug. I did it here for the sake of demonstration.
And the fiddle example is here : https://jsfiddle.net/m5vgd9g7/
EDIT
Thanks to #JDiMatteo who commented about the row class addition. I was about to maintain the bootstrap standards in grid system. (ref: http://getbootstrap.com/css/#grid). Apparently it seems row should be contained within container or container-fluid classes for it to work. This will define a row, where elements/columns(as in bootstrap) could reside in. And by using this, you can get rid of the custom styling we used earlier, padding/margin.
<div class="container">
<div class="row">
<a class="btn btn-primary" href="#">
Button
</a>
</div>
</div>
I am attempting to embed ShareThis code in to a website created using Bootstrap.
Problem is that for some reason the bottom of both buttons is cut off and also I cannot seem to center the buttons using Bootstrap column offsets as it seems impossible to get both buttons exactly centered using this method.
What is the solution here?
<div class="row">
<div class="col-lg-12">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
I'm not too familiar with the ShareThis buttons, do you have a link to view the site?
Regarding the centering, currently you are using a col-lg-12 which means it takes up 100% of the width and everything inside (your buttons) would be left aligned by default. You wouldn't necessarily need to use the bootstrap column offset but just put the spans in a wrapper as below. You can find out more about the Bootstrap Grid here http://getbootstrap.com/css/#grid.
<div class="row">
<div class="col-lg-12">
<div class="social-wrapper">
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_twitter_vcount' displayText='Tweet'></span>
</div>
</div>
</div>
Then add text-align:center to the wrapper.
.social-wrapper {
text-align: center;
}
Check out a JSFiddle here: https://jsfiddle.net/hez7pqbo/
I'm using Bootstrap navbar with the bootstrap.min.css file.
This navbar stretches to the entire screen, where in the CSS file do I change the navbar settings (I don't want it to stretch)? There are a lot of navbar classes there and I can't seem to locate the right one.
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Imperia Bank
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navHeaderCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Clients</li>
<li>Administrator</li>
<li>Accounts</li>
<li>Illustration</li>
<li >Atm</li>
</ul>
</div>
</div>
</div>
Place <div class="container"> above <div class="navbar navbar-inverse navbar-static-top">.
For anyone trying to make the navbar a custom width in Bootstrap 4, just override the navbar css width.
For example:
.navbar {
width: 400px;
}
In case you have more than 1 navbars (?!) just specify a custom class/id for the one you want to alter.
You should be able add your own styles on top of the existing styles. Using a tool like the chrome debugger you should b able to find the style rule that is doing this and then in your own stylesheet just use a more specific CSS selector to override it.
You can place the navbar in its own container (with applicable ID) and adjust the width of the container in your stylesheets. As Swagata said, you should be able to just flip the div tags and adjust your css accordingly. I'd give it a memorable name, though, for the sake of editing.
There is no pretty way to do this, considering .navbar was built to span the screen. But it can be accomplished fairly easily using the built in grid.
<div id='row'>
<div id='col-md-6'>
INSERT NAVBAR HERE
</div>
<div id='col-md-6'>
INSERT WHATEVER YOU WANT ON THE OTHER HALF OF THE SCREEN HERE
</div>
</div>
The question may sound a bit... stupid. But I'm kinda stuck.
I'm using Twitter Bootstrap. My test code is :
<div class="container-fluid">
<div class="row-fluid">
<div class="span3" style="background:#eee; border:1px solid blue;">
<ul class="nav nav-list">
<!-- List contents -->
</ul>
</div><!--/span-->
<div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website...</p>
<p><a class="btn btn-primary btn-large">Learn more ยป</a></p>
</div>
<div class="row-fluid">
<!-- The content -->
</div><!--/row-->
</div>
</div>
</div>
And this is what it looks like (I'm using colored borders to show you WHERE each of the 2 divs is) :
Now, my question is :
Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :
the Control Panel on the left (a whole column with with that gray-ish background)
the right-most div on the right (occupying all of the remaining space, with a white background)
I don't have much experience with twitter bootstrap, but I'm assuming that the answer would be to look at the css properties for your 'row-fluid' class and check the margin and width.
margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container
if ^ is already true, width=50%; (if you're going to have both side by side)
Hope that helps!