The dark grey Bootstrap navigation bar renders few pixels narrower than Bootstrap two green-and-blue columns which is placed below. How can I fix it so the navigation bar and the are the same width?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand logo" href="#">my logo</a>
</nav>
<div class="row">
<div class="col-10" style="padding: 0px; background-color: lightgreen; height: 100vh">
</div>
<div class="col-2" style="padding: 0; background-color: lightblue; height: 100vh">
</div>
</div>
Container are required when using the default grid system. The two most common containers are:
.container, which sets a max-width for the page content
.container-fluid, which will take the full width of the screen
.container-{breakpoint}, which behaves like .container-fluid until it reaches the breakpoint then behaves like a .container.
You will find more details in the very clear documentation.
If we consider the second solution, putting your content in a div.container-fluid fixes the problem:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand logo" href="#">my logo</a>
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-10" style="padding: 0px; background-color: lightgreen; height: 100vh">
</div>
<div class="col-2" style="padding: 0; background-color: lightblue; height: 100vh">
</div>
</div>
</div>
Related
I am trying to create a sticky header. I have used the bootstrap fixed-top class and it works.
The problem comes when I change the device from pc to tablet since the section stays behind the fixed header.
I have tried to put a fixed padding-top to the section but changing the size of the header when changing from PC to tablet does not work.
My header:
<header class="fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" style="overflow: hidden">
<div class="container-fluid">
<div>
<div>
<div class="badge bg-primary text-wrap">
<p>{{(datosEmpresaTaller | async).empresa}}</p>
</div>
</div>
<div style="margin-top: 10px">
<div class="badge bg-primary text-wrap">
<p>{{(datosEmpresaTaller | async).taller}}</p>
</div>
</div>
</div>
<form class="d-flex">
<button class="btn btn-outline" type="submit" routerLink='/dashboard'> <img src="assets/icons/menu.png"
alt="Cerrar Sesión" height="80" width="100" /></button>
</form>
</div>
</nav>
</header>
My section:
<div>
<section class="section" style="background-image: url('assets/img/cambiar-ruedas.png'); -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: repeat; min-height: calc(100vh);">
<div class="container-fluid">
<div class="left" type="button"> <img src="assets/icons/boton-actualizar.png" alt="Actualizar"
height="50" width="70" style="margin-top: 2%;" HSPACE="10" VSPACE="10"> <img src="assets/icons/atras.png" alt="atras"
height="50" width="70" style="margin-top: 2%;" HSPACE="10" VSPACE="10" routerLink='/picking-orders-zones'></div>
</div>
<div class="container-fluid">
<div class="table-responsive">
<table class="table table-primary table-striped" id="myTable" style="margin-top: 1%;">
<thead>
<tr>
<th>Orden:</th>
<th>Zona:</th>
<th>Agencia:</th>
<th>Pendiente:</th>
</tr>
</thead>
</table>
</div>
</div>
My css:
.section {
margin: 0;
padding: 0;
padding-top: 80px;
}
I need the section to stay fixed under the head regardless of the view.
Try bootstrap class called 'sticky-top'.
<div class="sticky-top">...</div>
Or "responsive sticky top" in bootstrap.
bootstrap docs.
To keep the main content bumped down below the header info.
I believe my background img is creating a blank space between it and my flexbox sticky footer. I’ve tried numerous ways, but they just create different problems so far... Can someone help? I created a placeholder image that’s the size of my original background img to recreate the problem for you! Thanks!
JS Fiddle Link
CSS:
.masthead {
height: 100vh;
min-height: 100%;
background:; /* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder%27');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Sticky Footer Classes */
body
{
display: flex;
flex-direction: column;
}
html, body
{
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: 0;
}
This can be solved in multiple ways,
Method 0: I think there is some unwanted text content before the Footer tag. If that text content is intentional then move to Method 2 else do this
Remove this below code snippet which under the <body class="d-flex flex-column">
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
Method 1: Moving the footer towards the place where the content ends.
#sticky-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
or Method 2: In the style .css file Move the CSS background-image description defined under the class .masthead to the body
background:; /* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
(use this in body not in .masthead)
This Blank space is your page-content.
You need to add this to your header:
.masthead {
position: absolute;
width: 100%;
margin-top: 56px; // your navbar height
}
Also add this to show your footer:
#sticky-footer {
z-index: 1;
}
If you want to center your content vertically add this classes to your page-content:
<div id="page-content">
<div class="container text-center h-100">
<div class="row justify-content-center align-items-center h-100">
See the snippet:
.masthead {
height: 100vh;
min-height: 100%;
background: ;
/* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
/* added */
width: 100%;
/* added */
}
/* Sticky Footer Classes */
body {
display: flex;
flex-direction: column;
}
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: 0;
z-index: 1/* added */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="#">website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#blogs">Blogs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#events">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#music">Music</a>
</li>
</ul>
</div>
</div>
</nav>
<!--—Full Page Image Header with Vertically Centered Content —-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 class="font-weight-light">website</h1>
<p class="lead">2nd line</p>
</div>
</div>
</div>
</header>
<div id="page-content">
<div class="container text-center h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © website</small>
</div>
</footer>
I am facing an error while scrolling page, body contents overlaps the navbar.
I have content over navbar that should disappear when scrolling, it is working fine.
While scrolling navbar should be fixed, this is working fine.
Problem is while scrolling, body contents are sliding over navbar. It should go from behind the navbar.
I have an image slider below navbar
Here is the code of HTML file:
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<div class="row">
<div class="col-sm-4" style="background-color:yellow; width:200px">
<img class="img-responsive img-rounded pull-left" src="img/logo 1.png" alt="Chania" width="200" height="200">
</div>
<div class="col-sm-4" style="background-color:pink;">
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<div class="col-sm-4 text-right" style="background-color:yellow;width:200px;">
<img class="img-responsive img-rounded pull-right" src="img/logo 2.png" alt="Chania" width="200" height="200">
</div>
</div>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
menu name..
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</form>
</div>
</div>
</nav>
CSS code of navbar:
.affix {
top: 0;
width: 100%; }
.affix + .container-fluid {
padding-top: 70px; }
CSS code for Slider
html, body {
height: 100%;}
.carousel, .item {
height: 70%; }
.carousel-inner {
height: 143%; }
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover; }
I am beginner in bootstrap.
Thanks.
You should put this in a fiddle but off the bat I would guess that your navbar should contain position:absolute; and z-index:1;
On seeing this query i have made jsfiddle for you just check it.. You are using affix for fixing navbar.
so in css just add the followings:
.affix{
width:100%;
top:0px;
}
And check with the z-index of your navbar keep high value for nabvar like z-index:9999;
JSfiddle link
All the coding looks good no issue with that. Just check my fiddle
Adding margin-top:30px; in the main Container would do what you are asking.
I would like to position my image inside the navbar and my name on the right of the image. Here's my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
You can use Flexbox on .navbar-brand and reduce padding a little bit
.navbar-default .navbar-brand {
display: flex;
align-items: center;
padding: 5px;
}
.navbar-brand img {
height: 100%;
margin-right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
I have a solution without flex. You just need to setup some attributes for .navbar-brand and .navbar-brand>img.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
.navbar-brand {
height: auto;
}
.navbar-brand>img {
display: inline-block;
padding-right: 10px;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">luckycharm-boy</a>
</div>
</div>
</nav>
Why not use a media object here?
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px">
</a>
</div>
<div class="media-body media-middle">
<h4 class="media-heading">Luckycharm-boy</h4>
</div>
</div>
</div>
</div>
</nav>
An another way which I prefer is - create a whole "row" div in full nav bar without nav-header , then you can fully control the positioning of img and text location in various screen sizes for mobile as well as large screens. Then you can give various col (columns) sizes and write in that .
I am saying this as it will help you to place it in any location
Easy fix would be using span. Check this out. DEMO here.
HTML:
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-logo" href="#">
<span><img src="http://i665.photobucket.com/albums/vv18/luckycharm_boy/lucky_zpsfnt9dbol.jpg" border="0" alt=" photo lucky_zpsfnt9dbol.jpg" class="img-circle" height="50px"/></span>
luckycharm-boy
</a>
</div>
</nav>
CSS:
a.navbar-logo {
color: #666666;
}
I'm working on a web app for which I want to have two independently scrollable areas on larger screens: a main content area on the left, and a smaller sidebar on the right.
I've managed to implement such a layout in CSS using absolute positioning and overflow properties, see this JSFiddle: http://jsfiddle.net/XLceP/
This is great, however I'm also attempting to make use of Bootstrap (3.1.1) in order to make the site responsive and for the components/styling. However I'm at a loss at how to do so.
Basically, I'd ideally like to use Bootstrap conventions (the column classes etc.) to make it so that on mobile screens the right pane collapses below the left pane (or disappears entirely) for a conventional vertical layout, with both taking up the full width. However it seems impossible to do this while using absolute positioning for the larger screen layout.
How can I attempt to tackle this problem?
Update 2019
Bootstrap 4
Now that Bootstrap 4 uses flexbox, you can this layout using flex-grow and the new overflow utility classes. This minimizes the extra CSS that was needed before in BSv3...
<div class="container-fluid d-flex flex-column flex-grow-1 vh-100 overflow-hidden">
<nav class="navbar navbar-light bg-light navbar-expand-md px-0 flex-shrink-0">
<a class="navbar-brand" href="#">App</a>
<ul class="navbar-nav">
<li class="nav-item">Nav</li>
</ul>
</nav>
<div class="row flex-grow-1 overflow-hidden">
<div class="col-2 mh-100 overflow-auto py-2">
<h6>Sidebar</h6>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
<div class="col mh-100 overflow-auto py-2">
<h3>Body content</h3>
</div>
</div>
<div class="row flex-shrink-0 bg-light">
<div class="col-12 py-2">
<p>Footer ...</p>
</div>
</div>
</div>
https://codeply.com/go/LIaOWljJm8
Bootstrap 3 (original answer)
You can use a CSS media query to "disable" the absolute positioning on mobile screens. This will let Bootstrap's responsiveness kick in...
#media (min-width: 768px){
#left {
position: absolute;
top: 0px;
bottom: 0;
left: 0;
width: 75%;
overflow-y: scroll;
}
#right {
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow-y: scroll;
width: 25%;
}
}
Demo: http://bootply.com/126137
I forked Skelly's bootply here while using col-xs-12 and hidden-xs.
<div class="col-xs-12 col-sm-6" id="left">
<p>Left contents</p>
</div>
<div class="hidden-xs col-sm-6" id="right">
<p>Right contents</p>
</div>
I prefer this because it avoids media queries in a css file.
You don't need Bootstrap to do what you want. You can simply modify your existing CSS to following:
#left {
float: left;
width: 75%;
height: 100px;
overflow-y: scroll;
background-color: #FC6E51;
text-align: center;
}
#right {
float: left;
overflow-y: scroll;
height: 100px;
width: 25%;
background-color: #4FC1E9;
text-align: center;
}
And then, in your media query for mobile screens, make both #left and #right flow:none, width: 100% and height: auto;
If you really want to use Bootstrap, just put both #left and #right in the following structure:
<div class="row">
<div class="col-md-8" id="left">Your Code Here</div>
<div class="col-md-4" id="right">Your Code Here</div>
</div>