So I have seen a couple other posts indicating that you have to have a container with h-100 to align items with the align-self class however I am running into problems getting a navbar aligned at the bottom of a div. If I stick the navbar within another container and row it works however then the navbar is not the full width of the main container. Here is what I have:
<div class="container-fluid h-100 body-content">
<nav class="navbar navbar-light bg-light align-self-lg-end">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="logo_banner">
</div>
<footer>
<p>Footer</p>
</footer>
</div>
Thanks, all help is appreciated.
Try using the class .align-middle.
https://getbootstrap.com/docs/4.0/utilities/vertical-align/
Related
Hi I have a nav into a container and I want to center all elements:
<!-- Main container -->
<div class="container align-content-center">
<!-- Navigation bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top mx-auto">
<!-- Link to home page -->
<a class="navbar-brand" href="#">HOME</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Search bar -->
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
</form>
</nav>
</div>
More specifically I want all nav items to be aligned at the center of the container component
GJCode,
Here is an example of using Bootstrap classes and some HTML wrappers to center align the menu: https://jsfiddle.net/learnwithclyde/sm2bz4kL/
<div class="container">
<div class="col-sm-6 col-sm-offset-3">
<!-- Menu elements like brand and navigation -->
</div>
</div>
The class container is for making the width a narrower than container-fluid.
col-sm-6 is setting the width for the elements in the div, i.e, the width of this div is going to be 6 columns max.
And finally, the col-sm-offset-3 is center align the div. col-sm-offset-3 simply adds a 3-column space before the div and 3-column space after the div. This totals to 6 columns.
Therefore, the total number of columns become 12 (6 from col-sm-6 and 6 from col-sm-offset-3).
Note: depending on the contents of your menu, you might need to adjust the values of col-sm-6 and col-sm-offset-3 but this should help you understand the concept itself.
Grid system
Use mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
How it works
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth look at how the grid comes together.
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
This question already has answers here:
Bootstrap 4 correct way to use row and col classes [duplicate]
(1 answer)
Bootstrap - do we have to use rows and columns?
(2 answers)
Closed 4 years ago.
I'm writing a page in html using Bootstrap 4.2. I would like to have a horizontal navigation bar at the top of the page, that occupies the whole width of the page, and remains static during navigation.
I tried to use a few divs with the class "container-fluid". The problem is that a margin appears on the left and right side of the bar
Here is an example of what I get in jsfiddle
<div class="container-fluid">
<div class="sticky-top shadow" id="containerMain">
<div class="container-fluid bg-secondary text-light p-1">
<div class="row align-items-center ">
Line number one content here
</div>
</div>
<div class="container-fluid filters bg-light align-items-center">
<div class="row p-1">
Line number two content here
</div>
</div>
</div>
</div>
Does anyone know how to make these unwanted margins disappear? I tried without the "container-fluid" class, but then the margin appears on the right side, with a horizontal scroll that I don't want either.
Thank you very much in advance,
container-fluid has padding-left and padding-right of 15px which is the gap you're seeing. You could overwrite it by adding the class px-0 which is padding of 0 for left and right. And you would then have to overwrite the 15px margins of the row with a mx-0 class.
But if it's a nav that you want, then what you should be using is the nav component of Bootstrap: https://getbootstrap.com/docs/4.1/components/navbar/
Not sure if this is what you're looking for:
Here's the jFiddle
<nav class="fixed-top navbar-light bg-light m-0 p-0">
<div class="container-fluid">
<div class="row text-center text-light bg-secondary p-1">
<div class="col">
Line number 1 content here
</div>
</div>
<div class="row text-center text-secondary bg-light p-1">
<div class="col">
Line number 2 content here
</div>
</div>
</div>
</nav>
I think the bootstrap "row" class adds some margin (15px).
Maybe you can add an own class to make margin: 0. Or delete the row class
I wish that helped!
Thank you.
I have two bootstrap containers, one inside header navbar of the page, the second below navbar. Inside each container there is some text. I want text that is in the navbar container to be shifted to the left by 15 px for all responsive breakpoints.
I tried to do this using a negative margin. Here is my code:
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container"><div style="margin-left: -15px;">Text1</div></div>
</nav>
<div class="container" style="margin-top: 50px;">Text 2</div>
and JSFiddle example.
This method works, but it has a serious bug. When the width of the browser decreases, text in header navbar starts to go beyond the screen. Is there any way to avoid this? Of course it is clear that I set up margin using #media, but I think this is not quite the right way.
If you use the right way of nesting elements in Bootstrap you will end up with an aligned left side: .row will give you -15px to the left to counter the 15px left padding on .col-xx-xx. What you could do is to add 15px padding to other containers and let the navbar keep the normal bootstrap container max-width... That will keep the default 15px padding on the navbar on mobile/tablet etc.
<nav class="navbar px-0 navbar-light fixed-top bg-primary">
<div class="container">
<div class="row">
<div class="col-sm-12">Text</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="container-inner">Text</div>
</div>
</div>
</div>
Codepen Example
You can use navbar-fixed-top instead of fixed-top for navbar section. In Bootstrap 4 adjust margin-left by using default css class ml-1,ml-2,.. and padding pl-1,pl-2 as follows.
Ref Bootstrap 4 spacing
<nav class="navbar navbar-default navbar-fixed-top bg-primary">
<div class="container">
Text 1
</div>
</nav>
<div class="container">
<div class="ml-4 mr-4">
<p>Text 2</p>
</div>
</div>
Try your ans here: https://jsfiddle.net/testdesigner/aq9Laaew/193572/
I would like to have some text, then a button, right aligned in a Bootstrap 3
navbar. I can add the corresponding components, but whatever I tried the result is ugly. I never managed to get it right so any help would be appreciated:
<div class="container-fluid">
<div class="row">
<div class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="nav pull-right">
<p class="navbar-text">text in navbar...</p>
<button class="btn btn-info">then a button</button>
</div>
</div>
</div>
</div>
The text looks ok but the button is stuck in the upper right corner.
Here is a link to bootply
Try adding the following CSS
.navbar .navbar-text{
float: none;
display: inline-block;
}
The default display property of .navbar-text is block, which is forcing it to be in a separate line.
How can I center my div inside a separate div with a class footer navbar-inverse navbar-fixed-bottom in bootstrap? Here's my exact code.
<div class="footer navbar-inverse navbar-fixed-bottom">
<div class="center-block">
<div class="small navbar-text text-center">
First Line<br />
Second Line<br />
Third Line
</div>
</div>
</div>
Image in Fullscreen:
But if I resize the width of my browser, the position is fine.
.navbar-text was floating to the left.
Fixed it for ya :)