I am trying to have my sidebar at full height. I am using bootstrap for my blog and here is a sample page:
http://blog-olakara.rhcloud.com/blog/2013/12/11/welcome-to-jekyll/
I am trying to avoid that white space at the bottom of the screen and have the blue backgound till the bottom . I tried to implement the second solution mentioned in this SO question
But, it spoils the responsive nature for the webpage.
I also found some solution that recommend to modify the base of bootstrap like "row" class.. Is there a solution for bootstrap with responsive retained?
From their sample page:
<!-- Container-->
<div class="container-fluid">
<div class="row">
<!-- sidebar -->
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
</div> <!-- sidebar -->
<!-- main pane -->
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
<p>hello world</p>
</div> <!-- main -->
</div> <!-- .row -->
</div> <!-- .container-fluid -->
You may have to tweak some settings from their custom CSS file
Add style="height:100%;" at your <html> tag. So it will be <html style="height:100%" class="js">
Add height to html tag
html {
height: 100%;
}
Related
This question already has answers here:
Bootstrap 3.3.7 "row" causing horizontal scroll bar
(7 answers)
How to make bootstrap 3 fluid layout without horizontal scrollbar
(21 answers)
Closed 4 years ago.
I made a page with Bootstrap 4 and there's a white space on the right.
I have everything except the nav bar in a div with class col. I didn't put the rows and cols inside a container div because Bootstrap documentation suggests going without it for an edge-to-edge design. (I tried putting them inside a container-fluid div and the gap was still there).
Since col adds 15px on the right and left, I also tried the following, and it didn't remove the gap:
.col {
padding-right: 0 !important;
padding-left: 0 !important;
}
CodePen
There is no need to overwrite bootstrap classes. Use the inbuilt utilities class to overwrite if you have to. Since hero image has to be edge-to-edge you can use p-0 to remove the padding. In footer also you are missing the row-col structure. and wrap your content inside container-fluid as shown in example below.
Try this
Check Demo HERE
HTML
<nav class="navbar navbar-expand-md bg-dark sticky-top navbar-dark">
<!-- Navbar Content -->
</div>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col p-0">
<div class="hero-image">
<div class="hero-text text-white">
<h1>NC</h1>
<h5>Web developer</h5>
<form action="mailto:email#gmail.com" method="post" enctype="text/plain">
<button class="btn btn-dark btn-top btn-contact">Contact Me</button>
</form>
</div>
</div>
</div>
</div>
<section id="about">
<div class="row about">
<div class="col">
<h2>About</h2>
<!-- Content -->
</div>
</div>
</section>
<section id="portfolio">
<div class="row portfolio">
<div class="col-sm-12">
<h2>Portfolio</h2>
</div>
<!-- Content -->
</div>
<!-- End of row div -->
</section>
<section id="contact">
<div class="row contact">
<div class="col center-block">
<h2>Contact</h2>
<p>Have a question or want to work together?</p>
<!-- Content -->
</div>
</div>
</section>
<div class="footer bg-dark row">
<div class="col">
<!-- Content -->
</div>
</div>
</div>
try this
.col{
padding: 0 !important;
}
.row{
margin-left: 0;
margin-right: 0;
}
this is why I hate using bootstrap, since you have to use !important to override bootstrap default style. it even worse using themes based on bootstrap, since its already using !important to override bootstrap style, and you want to override it again
All you need to do is wrap all row in container-fluid like this
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="hero-image">
</div>
</div>
</div>
</div>
<section id="about">
<div class="container-fluid">
<div class="row about">
<div class="col">
</div>
</div>
</div>
</section>
same you will have to do in portfolio and contact
Is there a simple css code for bulma making their horizontal tabs to vertical tabs? (sample below) I just want to overwrite their css
<div class="tabs">
<ul>
<li class="is-active"><a>Pictures</a></li>
<li><a>Music</a></li>
<li><a>Videos</a></li>
<li><a>Documents</a></li>
</ul>
</div>
I'm afraid there isn't a simple class to add in Bulma to achieve this (or at least not that I'm aware of). But since Bulma is using flexbox you can achieve a lot by simply overwriting the flex-direction.
.tabs ul {
-webkit-flex-direction: column;
flex-direction: column;
}
I also made a fiddle to demonstrate.
Very late to on this one but if it helps anyone else. I use a horizontal tile with 2 children. The first child I use a panel without a heading, just panel blocks that are anchor tags for my vertical tabs, the second child a div to put the target content of the anchor tag in. Switches to tabs on top and content on bottom at mobile breakpoint. JSFiddle
<section class="section">
<div class="container">
<div class="tile is-ancestor">
<div class="tile box is-parent is-horizontal">
<div class="tile is-child is-2">
<nav class="panel datanav">
<a class="panel-block">Families</a>
<a class="panel-block">Members</a>
<a class="panel-block">Member Birthdays</a>
<a class="panel-block">Member Cars</a>
<a class="panel-block">Sponsors</a>
<a class="panel-block">Newsletter Mailed</a>
<a class="panel-block">Newsletter Electronic</a>
</nav>
</div>
<div class="tile is-child is-10 has-background-white-ter">
CONTENT
</div>
</div>
</div>
</div>
</section>
I'm using Twitter Bootstrap 3.3.1, with the template "Jumbotron".
Here, my page :
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<!-- content -->
</div>
</div>
<div id="root" class="container">
<div id="main" class="row">
<section id="content">
<!-- content -->
</section>
</div>
<footer>
<!-- content -->
</footer>
</div>
On the browser, the header (the div with role "navigation" + div with class "jumbotron") has a 290px size.
When I'm trying to push the footer at the bottom with all what I found, I have always the same problem. The "root" and "main" div will always be longer than the screen display because of the header, I guess.
A lot of internet's solutions don't include a header... :(
I don't want to fix the footer with a "position:fixed", I realy want to push it at the bottom with CSS only.
To be more specific, my footer has to stay at the bottom of the page with or without content. If the content is sorter than the screen, the footer will be at the bottom of the screen. If the content is longer than the screen, the footer will be at the end of the page.
EDIT: I don't want to do it WITH Bootstrap. I just want some CSS to do it without Bootstrap if Bootstrap can't do it !
I hope it's clear enough.
If someone has an idea, it'll make my day!
Thanks.
Bootply Example
Did you try this?
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<!-- content -->
</div>
</div>
<div id="root" class="container">
<div id="main" class="row">
<section id="content">
<!-- content -->
</section>
</div>
<footer>
<div class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- content -->
</div>
</div>
</div>
</footer>
</div>
Also if this isn't what you're looking for, edit your question and try to be more detailed.
EDIT
OP is looking for the navbar-static-bottom, which renders the footer at the very bottom of the page REGARDLESS* of page content/height. The only issue is, this class has not yet been added to bootstrap. It's in the list of commits, but has yet to be reliably implemented.
Commit Log for Bootstrap
See this document on the status of navbar-static-bottom class. As of right now, there is not reliable way to do this in Bootstrap.
In bootstrap you can style your footer with the class of
navbar-fixed-bottom
A default footer might look something like this:
<nav class="navbar navbar-default navbar-static-bottom" role="navigation">
<div class="container">
...
</div>
</nav>
Have you looked into these examples?
http://getbootstrap.com/examples/sticky-footer/
or
http://getbootstrap.com/examples/sticky-footer-navbar/
This is my favorite:
http://www.cssstickyfooter.com/
It's been working like a charm for years.
Hope this helps!
So you want to keep the footer at the bottom of the page with css, you could just do:
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
bottom: 0;
}
I am trying to layout a web page. My web page will have a search box in the upper left corner. Below the search box are my navigation items. The main content will go in the right area. I am using Zurb Foundation 5 in an effort to create this. Currently, my HTML looks like the following:
<div class="full-width full-height" style='width: 100%; max-width: 100%; height:100%;'>
<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
<div class="row collapse">
<div class="small-12 columns">
<input id='search' type="text" />
</div>
</div>
<div class="row">
<div class="small-12 columns">
<!-- My vertical list of navigation items will go here in a <ul> -->
</div>
</div>
</div>
<div class="large-9 columns">
<!-- The main content will go here -->
</div>
</div>
I need the left portion to have a background color of 'cornsilk'. It should always take up the full height of the screen. This works. If there are more navigation items than space available, a scroll bar needs to be used only for the navigation items. In other words, I need the search box to always be visible. At this time, this is not working. The scroll bar I've created extends below the visible page area. I also have the following related CSS
*{ padding:0; margin:0}
html, body { height:100% }
How do I
a) Get the scroll bar to work within the bounds of the navigation area?
b) ensure that it is right aligned flush against the border of the navigation area?
What your looking for is overflow: auto
this should be placed on the navigation container .. you could add a .navigation class on that container
<div class="large-3 columns" style="overflow-y:scroll; background-color:cornsilk;">
<div class="row collapse">
<div class="small-12 columns">
<input id='search' type="text" />
</div>
</div>
<div class="row NAVIGATION"> <!-- Add class to target nav -->
<div class="small-12 columns">
<!-- My vertical list of navigation items will go here in a <ul> -->
</div>
</div>
</div>
then the CSS would be:
.navigation {
overflow: auto;
height: whatever you want it to be;
}
EDIT:
basesd on your Fiddle . i made the navigation with oveflow auto http://jsfiddle.net/yxMn3/1/
I want my site to be fluid/responsive to whatever device the user has; I reckon more often than not it will be a cell "phone," but I am developing on a laptop, so there's a mismatch between what I see at design time and what most users will see. Of course, I can run emulators/simulators, etc. But my point is that I want the site to automatically adjust to the size/aspect ratio/orientation the device at any given moment. From what I've read, the easiest way to accomplish this is to leverage Twitter Bootstraps capabilities by referencing their CSS file and adding a few class declarations to various tags in my html. I'm wondering just where I need to add these.
I've added the bootstrap css:
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
My _SiteLayout.cshtml (Razor 2 webiste) file came structured this way (showing just the body, head decapitated):
<body>
<div id="fb-root"></div>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</p>
</div>
<div class="float-right">
</div>
</div>
</header>
<div id="body" >
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>
</p>
</div>
</div>
</footer>
</body>
So it uses "content-wrapper" on the outher divs and then floats inner tags left and right. Does this obviate the need for Twitter Bootstrap? Is the same sort of responsive design baked into this Razor 2 structure already?
If not, in which tags should I put the Twitter Bootstrap class declarations?
Should I add class="row-fluid" to some of these tags and, if so, which ones?
The basic fluid grid scaffolding of Twitter Bootstrap is laid out as .container-fluid > .row-fluid > .span#. Spans within .row-fluid use percentage widths conducive of layouts consisting of elements that add up to 12: .span1, .span2, .span3 etc..
Span classes are already set to float:left which can be overridden by adding .pull-right to float:right elements.
So Bootstrap implementation with your layout could look something like:
<body>
<div id="fb-root"></div>
<header class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span6">
<p class="site-title">
</p>
</div>
<div class="span6 pull-right">
</div>
</div>
</header>
<div class="container-fluid" id="body">
#RenderSection("featured", required: false)
<section class="row-fluid content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer class="container-fluid">
<div class="row-fluid content-wrapper">
<div class="span12">
<p>
</p>
</div>
</div>
</footer>
</body>
Take a look at http://twitter.github.io/bootstrap/scaffolding.html#fluidGridSystem