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.
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).
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/
I am developing a site, where I have Login div as part of header in Desktop view. Where as the same div has to be appear in Mobile menu along with existing menu items as shown below:
So, how to implement this as part of mobile menu item (Without using 2 Divs for hide/show) using Bootstrap?
You could use the navbar class for your header. And then bootstrap will automatically behave that way. Otherwise you should use the media query.
Or you could use the visible-xs, visible-sm, etc. bootstrap classes (with mulitple div's), to handle what is viewed on which device.
first of all this is no javascript / jquery question.
What you wannt to do is explained here
See how aspects of the Bootstrap grid system work across multiple devices with a handy table.
bootstrap itself does the job just read that doc
I Think You Have Too Use .col-md class from bootstrap.
Give Class OF menu div as col-md-4 and in login and content div has col-md-8.
For Example,
<div class="row">
<div class="menu col-md-4"></div>
<div class="login col-md-8"></div>
</div>
Just Like This...
If You Are Don't familiar with Bootstrap. Then First Read Out The Documentation That Will Suggested By Burak Topal . So You are understand that what this class will actually do.
Might This Will Helpful.
I found the solution for this without using media queries. We need to place both top and left navbars inside ".navbar-collapse" class.
I have used a custom class "navbar-fixed-left" to make the left navbar.
.navbar-fixed-left {
margin-top: 47px;
left: 0px;
width: 140px;
position: fixed;
border-radius: 0;
height: 100%;
}
.navbar-fixed-left .navbar-nav > li {
float: none; /* Cancel default li float: left */
width: 139px;
}
.navbar-fixed-left + .container {
padding-left: 160px;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="User Name">
<input type="text" class="form-control" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
<div class="navbar-inverse navbar-fixed-left">
<ul class="nav navbar-nav">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container">
<h3>Content goes here...</h3>
</div>
I have used the sticky footer in Bootstrap .. An example of which is
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">Site built by this</p>
<a class="navar-btn btn-danger btn pull-right">Subscribe on Youtube</a>
</div>
</div>
But I want to use the normal footer.. So that I can only see that when I scroll to the bottom and not always.. How can I do that with the existing code in Bootstrap?
Thanks
Use navbar-static-bottom and a container-fluid inside like this..
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container-fluid">
<p class="navbar-text pull-left">Site built by this</p>
<a class="navar-btn btn-danger btn pull-right">Subscribe on Youtube</a>
</div>
</div>
http://www.bootply.com/sa1xW9fyTW