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>
Related
I recently published a site and I realize that the size of each page of this site is always wider than the size of the screen (Even if my screen has a resolution of 3840 * 2160!) .
I use Boostrap 4 and in the _Layout view, I have by default the meta tag which allows to adapt the size of the page to the used device:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
I did not touch the bootstrap.css file (at least nothing who's related to the size).
I noticed that if in the _Layout view I remove all which form the top of my page (my menu), the width of the page is correct (but it is obviously not a solution).
So I have a removed one div class each per each to see which one provided the problem but no way, each time the width is always greater than the page.
Do you have an idea?
<div class="bs-docs-section clearfix">
<div class="row m-0">
<div class="col-lg-12">
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
<div class="container p-0">
<div class="navbar-header">
#Html.ActionLink("Home", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navbar">
//code
</div>
<partial name="_LoginPartial" />
</div>
</nav>
</div>
</div>
</div>
</div>
EDIT
With row m-0, it show like that
give margin: 0; first to row class or m-0, so it not be wider or remove horizontal bar from your page.
for full width add class padding: 0; or p-0 in your container class
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<div class="bs-docs-section">
<div class="row m-0">
<div class="col-lg-12 p-0">
<div class="bs-component">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color:#C6DA4B">
<div class="container p-0">
<div class="navbar-header">
#Html.ActionLink("Home", "Index", "Home", null, new { #class = "navbar-brand" })
</div>
<div class="collapse navbar-collapse" id="navbar">
//code
</div>
<partial name="_LoginPartial">
</div>
</nav>
</div>
</div>
</div>
</div>
I don't know much about bootstrap, but it seems like you need another "container" div around your "row".
<div class="container">
<div class="row">
[etc]
</div>
</div>
Bootstrap row has a default left and right margin with -15px that's why the page shows horizontal scroll bar. To fix this we have a container wrapped to the row like .container or container-fluid (Depends according to the layout).
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/
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/
Using bootstrap 3's grid system I am trying to do the following -
|button1 button2| max horizontal space |button3|
or in html terms
|button1 button2 float:left| |button3 float:right|
I have created the above using bootstrap's column offset for the middle horizontal space - fiddle.
<div class="row">
<div class="col-md-3">
<button class="btn btn-default">Join</button>
<button class="btn btn-default">Leave</button>
</div>
<div class="col-md-offset-7 col-md-2 text-right">
<button class="btn btn-default">Start</button>
</div>
</div>
When resizing the offset acts as a block that forces the movement of other items. Is there a way to do this using bootstrap grid that acts in the traditional float behaviour?
I am not sure what you want but I can suggest you to use pull-right for the buttons to be on the right hand side:
<div class="container">
<button class="btn btn-default">Join</button>
<button class="btn btn-default">Leave</button>
<button class="btn btn-default pull-right">Start</button>
</div>
http://www.bootply.com/GpKoFcNvII is the link for a working example.