Twitter Bootstrap - unwanted space above the footer in Mobile App - html

My question is similar to the question here:
Bootstrap Unwanted space on the bottom of modal-footer after using the unofficial Bootstrap Modal modification
But, i am not using Modal and the issue only really bothers me in Landscape mode.
This is a photo (apologies) of what I mean.
I am totally stumped. Apart from the link I gave above I cannot find any thing else relating to this?
Just to confirm - want get rid of the white space.
And this is my current markup:
<div style="background-color: black;">
<nav id="TopMenuBar" class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: black;">
my top content
</nav>
<div class="row mainBody" id="Contents" style="margin: 0; background-color: black;">
my body content
</div>
<div id="BottomMenuBar" class="container-fluid">
my footer content
</div>
</div>

Related

Bootstrap navbar header - how to center the image

I've a main layout page that is used on all other pages. The following bootstrap navbar header has an image that always displays on the left. I would like it to display in the center. I've tried to use <div class="text-center">...</div> but to no vail. I'm using ASP.NET Core with VS2015 that by default has Bootstrap 3.0 installed and confitured. But this question may be generic to all Bootstrap users:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<table><tr><td><img src="~/images/abc.gif"></td></tr></table>
</div>
</div>
</div>
Just get rid of all the unnecessary containers and add text-center to navbar
<div class="navbar navbar-inverse navbar-fixed-top text-center">
<img src="~/images/abc.gif">
</div>
jsFiddle: https://jsfiddle.net/azizn/ctrppwLe/
P.S You should avoid using tables unless you're presenting tabular data.

Using an empty <div> to fill up menu bar space

In this website, top side of the picture is consumed by the black menu bar. I would like to place an empty <div> to push the picture downwards. <div> height needs to be resized automatically to prevent blank space from appearing in different resolutions.
I tried adding empty <div>s, using vmin/vmax, didn't work.
JSFiddle link
menu bar
<header id="header">
<div class="top-bar">
<div class="container">
<div class="row">
</div>
</div><!--/.container-->
</div><!--/.top-bar-->
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse navbar-right">
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
The image is used as 'background-image' on a div with a fixed size. Some advantages are loading time and that the image can not be selected or dragged. A disadvantages the inflexibility. It's not that the black bar overlaps the image, as you can see when inspecting the element, but it's the div itself that cuts off part of the image. The best thing you can do is only use header images that exactly fit the container or you can play with the CSS background-size. Have a look at cover, but know that cover does not work in older browsers.

Bootstrap Image Link not working

I have a logo image in my header and I have the standard code in there, the browser source code even shows it, but the link isn't going anywhere. Please see below:
<img class="img-responsive hidden-xs" src="img/sitewide-images/logo.png" width="106" height="106" alt=""/>
Here is a link to it live on a testing server: http://wsieworksstaging.com/ptmw/index.html
Bootstrap should be container > row > column
You didn't place those columns within a row, so the row below isn't clearing and is overlaying it. Try this:
<div class="container">
<div class="row"> <!-- wrap with a row to force the content below to clear -->
<div class="col-md-2 col-sm-2">..</div>
<div class="col-md-10 col-sm-10">..</div>
</div>
<div class="row">
<nav class="navbar navbar-default navbar-inner" role="navigation"> .. </nav>
</div>
</div>
From The Documentation
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.
Because your div with the class row is sitting on top of it and blocking any clicks. Add clear:left to have it get out of the way, and the link will become clickable.
You can also try giving that anchor an absolute position and a z-index value.
a[href="index.html"] {
position: absolute;
z-index: 1;
}

How to have a normal bar by Bootstrap? (Not a Navigation)

I am trying to have a bar on the top of my site, its not a navigation bar. Various items will go on this bar. So I was thinking How can use Bootstrap for this purpose. There is a nav bar in Bootstrap but I used it already for the navigation of my bar. Can I also use it for different purposes?
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
</div>
</nav>
Use navbar-static-top instead of navbar-fixed-top for your Bootstrap's Navigation bar.
Add <div id="normal-bar">My normal bar</div> before your Bootstrap's Navigation bar and you can customize it any way you want.
Bootstrap's Starter template - DEMO
HTML
<div id="normal-bar">My normal bar</div>
<div class="navbar navbar-inverse navbar-static-top">
......
</div>
CSS
body {
padding-top: 0px; /* It was 50px before */
}
#normal-bar {
/* Your CSS - It's only for DEMO */
background-color:#f00;
text-align:center;
padding:10px 0px;
font-size:20px;
}
You don't need to use nav. For additional bars and sections use this code:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<p>Some text here or whatever you want</p>
</div>
</div>
</div>
Your nav has position:fixed and min-height:50px properties, so don't forget to add to your next section margin-top:50px so it's visible.
Yes, you can use two navigation bars to achieve this behavior by using two separate navbars with navbar-fixed-top and navbar-static-top. See this example on bootply.

Bootstrap with two static sections

I'm creating a mobile site using bootstrap and i'm struggling to get the CSS correct.
I am trying to create 3 sections on the page.
Navigation - this will always be at the top, so when the page scrolls, the navbar is always visible. Im using the standard bootstrap navbar for this and appears to work well.
I next have a DIV which display a pretty line graph - i would like this to be the same as the nav bar - i.e. does not scroll away.
Next i have a DIV which contains a table, this needs to be scrollable.
So essentially the top half of the screen should just be static and the bottom half containing the grid should move. This is what i've done so far! but it doesn't seem correct.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
</nav>
<div style="padding-top:70px; z-index:100; height:430px; top:0; position:absolute; padding-right:2%">
A pretty line Graph
</div>
<div style="position:relative; height:100%; overflow-y:auto; overflow-x: hidden; padding-top:430px;">
My Table
Hopefully that makes sense.....
HTML:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
Place your header items here
</nav>
<div class="page-header">
Place your chart here
</div>
<div class="container">
Place your table here
</div>
CSS:
body { padding-top: 70px; }