why the elements are not getting spaced? - css

hey i want the 3 div to be spaced between in the website with the help of bootstrap in the nav bar anmd i am not getting the desired results
i want THE DIV TO BE like this way pls help me to solve it with bootstrap classes
<content of div1> <content of div2> <content of div3>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between ">
<div>// div 1//
</div>
<div class="collapse navbar-collapse " id="navbarSupportedContent">// div 2//
</div>
<div>// div 3//
</div>
</nav>

By default .navbar-collapse is set to flex-grow:1. You need to disable this to get what you want:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between ">
<div>// div 1//
</div>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">// div 2//
</div>
<div>// div 3//
</div>
</nav>

Related

Bootstrap problem with line-up of left sidebar & page content

I'm trying to convert an existing site (and make it responsive) using Bootstrap (4.3.1) - and learn Bootstrap as I go through it.
I have a top-Nav
then a middle portion - containing:
a Sidebar (on the left)
& page content on the right
then at the bottom a Footer.
But try as I might (& I've spend 2 days reading Bootstrap's examples, & Stack Overflow Qs) - I can't get the middle section to be same width as, and to line-up with, the header - without ridiculous amounts of css.
I'm sure/hopeful? there's a easy way ;) What am I not doing/doing wrong?
Here's my code (inline code/colors just to help me see where elements are)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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="bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
</head>
<body color="pink">
<!-- Page container -->
<div id="HomePage"class="container">
<nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
<!-- Middle Section of the Page page -->
<div class="container w-100 p-0">
<div class="container row w-100 p-0">
<!-- Start of left Sidebar -->
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
</div>
<!-- Page Footer -->
<nav class="navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</div> <!-- End of Page container -->
</body>
</html>
PS - Rationale: I need the middle portion full width, as on some pages there are images at top-right of the page that should line-up with right-hand edge of header,
And the sidebar contains full width images, with almost no padding etc.
Just wrap each section of your website into a different row and then set grid columns to their inner divs, using col. Like so:
<div id="homePage" class="container">
<header class="row">
<nav class="col navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a>
</nav>
</header>
<div class="row">
<div class="col-1" style="background-color:yellow;">
Sidebar
</div>
<!-- Righthand side content -->
<div class="col-11" style="background-color:green;">
MAIN PAGE CONTENT
<p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p><p>xxxx</p>
</div>
</div>
<footer class="row">
<nav class="col navbar sticky-top navbar-light bg-light" color="blue">
<a class="navbar-brand" href="#">Footer at bottom of page</a>
</nav>
</footer>
</div>
Add width:100% to the middle section. That should stretch the div to occupy 100% of the parent (in this case the container's) width which is also the same as the headers width

Navbar is not displayed

Why there is no navbar in the below snippet? Am I missing something? If yes, What?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
I want like the below image:
Color is changed!
You missed .navbar-default, adding it will show the navbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
Update
Also for your information, <center> tag has been deprecated referring to MDN Web Docs
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
You could use text-align: center or in your case since you are using bootstrap if you want the same effect as <center> you could add the class .text-center to parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid text-center">
<button class="btn btn-large btn-success" onClick="window.print()">Print</button>
</div>
</div>
</div>
</div>
With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>

Bootstrap right navibar messy how to fix this?

I am trying to add the
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
In the above example, my Logout button is going outside of the nav bar. what is wrong here? how to fix this?
You are taking navbar in side .container class and again the same container class taken after .navbar class as BOOTSTRAP container class have fixed width 1140px + 30px padding for large view so your navbar overflow outside it parent container.
[body > .container > .navbar > .container]
To resolve it you have to remove first .container and put <nav class='navbar'> directly to body tag and put container or container-fluid inside of navbar.
change to [body > .navbar > .container OR .container-fluid]
ONE MORE THING TO SAY
[Practice makes perfect]
It is not going outside of the navbar. You have nested two container. The padding in containerplays the part here.
<div class="container">
<nav class="navbar navbar-default">
<div class="container">
container in bootstrap is 1170px width having padding-right:15px , padding-left:15px .( I am viewing it in a screen resoultion > 1200px) .Your navbar have a total space of 1140px now (1170px - 30px = 1140px) which has a background colore property. As you again adding a container , It is occupying a space of 1170px now which exceeds 1140px. So in both side , a extra 15px white space gote added. Furher , The nested "navbar-right" has "margin-right:-15px" that push your nav further.
Simply construct this way :
<div class="container">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<div>
<ul class="nav navbar-nav navbar-right ">
<li>Other contacts</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a></li>
</ul>
</div>
</nav>
</div>
This is how a bootstrap navbar is made:
Navbar with no container wrapping it, but a container-fluid inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Mean Office</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Other contacts
</li>
<li ng-if="main.loggedIn"><a ng-href="#" ng-click='main.doLogout()'>Logout</a>
</li>
</ul>
</div>
</nav>
P.S.: view the results in full page for better viewing

Vertical alignment in bootstrap header

I know I can do this with a bunch of manual CSS, but am wondering if there's a Bootstrap way to do it.
The Bootstrap site says I can, "create lighter, secondary text in any heading with a generic <small> tag or the .small class." So I try this in an <h1> element, but the vertical alignment goes off as soon as I try floating it to the right:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right">and smaller text</small></h1>
</header>
</body>
I've also tried putting both items in columns (e.g. .col-md-6) but this also uses floats, so has the same result. Any easy way to do this?
You should use external CSS styles... but if you really really REALLY want to use only build-in bootstrap classes i have something funny for you! Check this out:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading
<small class="pull-right">
<h1 class="media">
<small>and smaller text</small>
</h1>
</small>
</h1>
</header>
</body>
This is NOT a good solution. This is just a CURIOSITY.
EDIT:
Use em units instead, to address different displays:
.h1--small {
line-height: 1.7em;
}
.h1--small {
line-height: 1.7em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right h1--small">and smaller text</small></h1>
</header>
SOLUTION:
The computed value for your <h1> css property line-height is equal to 39.6px, so all you need to do is define the same value in your <small> tag:
line-height: 39.6px;
To check the computed values of your h1 element just go to dev tools, select your h1, click on computed tab on your top right and look for line-height;
CODE SNIPPET:
.h1--small {
line-height: 39.6px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <small class="pull-right h1--small">and smaller text</small></h1>
</header>
</body>
Playing around with Kamil's answer, I figured out how to get this working. Apply the .pull-right class to a block element and put the <small> element inside it:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<nav class="navbar navbar-default navbar-static-top">
Here's some navigation
</nav>
<header class="page-header">
<h1>Main Heading <div class="pull-right"><small>and smaller text</small></div></h1>
</header>
</body>

How to resize the navbar header image?

I'm trying to include an image as my navbar header as the code shows below:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="logo.jpg" alt="">
</div>
</div>
</nav>
The icon appears but very small. How can I resize it?
You have to reduce the padding of navbar-brand.
See the following example (https://jsfiddle.net/m9acxw28/1/):
.navbar-brand {
padding:0;
}
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="http://placehold.it/100x100" alt="">
</div>
</div>
</nav>
Hint: Make sure the custom CSS is placed after the Bootstrap CSS!

Resources