I'm struggling to position button which is nav container to the right side of the screen. All other nav-items need to be on the center so i`m using justify content center.
I have tried to use:
margin-left:auto on the button, but it moves other links on the left side.
remove justify-content-center on nav and add flex-shrink:1 with margin-left: auto on the button.
move button outside nav flex group, but then button appears on the next row.
Screenshot of the nav container and button what need to position on the right side:
HTML:
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Places</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Blog</a>
</li>
<button type="button" class="btn btn-primary">Primary</button>
</ul>
You were almost on the right track.
You would need to take the button out of the list, and then declare the entire enclosing nav for the list and button to be a flex with center. That would more or less result in the same thing you have now, but it will have the list and the button as separate items. Then you'd take the list and make it grow as much as it can to the end using the class flex-grow-1 or flex-fill. That will push the button to the extreme right still being on the same row.
Here's the fiddle: JSFiddle
Related
I'm currently learning the basics of bootstrap, and am having issues with the margin-auto. I am working with a navbar and trying to position it use ml-auto to separate it from the brand (pushing the navbar to the right of the page) Unfortunately, I cannot figure out why it's not working for me. I've done some searching on getbootstrap.com site, but am finding nothing that helps. Can you please help? Thank you! :)
<a class="navbar-brand" href="">tindog</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</nav>```
Simple put the m-0 and p-0 inside the navbar class. hope so this way your issue will be solved.
Bootstrap includes an .mx-auto class for horizontally centring fixed-width block level content.
Use mx-auto
Refer: https://getbootstrap.com/docs/4.4/utilities/spacing/
I'm having an issue with the CSS of my Bootstrap dropdown menu for my web app. It is too far to the right edge of the page for my liking, and I would simply like it to be shifted to the left a bit more. I have tried to style the menu with a margin-right in order to get it off the edge of the screen, but still no luck even though if I do the same with margin-left, it moves the menu even farther off the right edge of the screen. I need some assistance with the CSS on this issue. Below is what the menu looks like:
I simply have given an ID "dropdownMenu" to the dropdown, and it is being applied to the correct HTML element, but the margin-right is simply not working. Here is the accompanying HTML:
<ul class="navbar-nav ml-auto">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
More <span class="caret"></span>
</a>
<ul class="dropdown-menu" id="dropdownMenu">
<li class="nav-item">
<a class="nav-link" href="${contextRoot}/profile">
Account
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:$('#logoutForm').submit();">
Sign Out
</a>
</li>
<sec:authorize access="hasRole('ROLE_ADMIN')">
<li class="nav-item">
<a class="nav-link" href="${contextRoot}/register">
Register
</a>
</li>
</sec:authorize>
</ul>
</li>
</ul>
#dropdownMenu {
margin-right: 2% !important;
position: relative;
}
You can try for example margin-right: 20px !important.
!important will gonna apply the margin right to your element because it will gonna override the old value.
The original CSS for Bootstrap dropdown-menu class has property left:0. I altered this, and the final placement I liked was left:-10px; You see in the image the menu is no longer on the edge.
I have the following bootstrap nav tabs:
<div class="container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class=nav-link>Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class=nav-link>Documents</a>
</li>
</ul>
</div>
I removed all of the href tags for brevity and to make it easier to read.
My problem is that the tabs are displaying like this:
By default, the tabs should be on the left side of the page, correct? What is causing this issue?
My goal is to get the tabs to align to the left side of the page, something like this:
Based on the code you've provided it would appear that your container is the problem. The container element applies a fixed width to everything within it, centering itself to the viewport.
The code that you have provided doesn't suggest that this component is required, but given that you've provided a minimal example you may expect unforeseen issues with its removal.
As mister #Robert already wrote, the align left problem caused by .container div. Although lets write your code more correct. You misses .active class in first li a. And a href attribute you will need anyway. Minimal it should be href='#' for the correct work of Bootstrap tabs.
<div class="any-class-not-container">
<ul class="nav nav-tabs" id="projectTabStrip" role="tablist">
<li class="nav-item" id="projectDetailsTab">
<a class="nav-link active" href="#">Project Details</a>
</li>
<li class="nav-item" id="projectStatusTab">
<a class="nav-link" href="#">Status</a>
</li>
<li class="nav-item" id="projectDocumentsTab">
<a class="nav-link" href="#">Documents</a>
</li>
</ul>
</div>
More about Nav tabs in Bootstrap 4 you can read here https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
This question already has answers here:
Bootstrap align navbar items to the right
(24 answers)
Closed 2 years ago.
I am working with bootstrap 4.
I didn't get navbar right to the page I don't know what the problem is going on.
Is Somebody else can help to fix this issue.
I have tried to add class pull-right to navbar-collapse div but its don't work. So I have also tried to add float right property and set to !important but its also not get helpful.
<div class="collapse navbar-collapse pull-right" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">HOME</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">FAQS & HELPS</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">CONTACT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">LOGIN</a>
</li>
</ul>
</div>
I want div content(nav links) to the right of the page.
Can you please try ml-auto instead of mr-auto?
So the ul tag will be like this
<ul class="navbar-nav ml-auto">
Please check the following Stack Overflow post
What happened to the .pull-left and .pull-right classes in Bootstrap 4?
Hope this helps you out.
Below is my Bootstrap 4 navbar code in which I'm trying to create a right side navbar height to full 100%.
<nav class="navbar navbar-expand-sm bg-light navbar-light"
style="width: 200px; float: right;">
<ul class="nav flex-column">
<li class="nav-item active">
<a class="nav-link" href="#">Sports</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Facebook</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Youtube</a>
</li>
</ul>
</nav>
I have also tried height: 100%; , navbar-full to the <nav> but it's not effecting any more.
See the image:
I would probably not rely on Bootstrap's built-in Navbar component for this, because it's really designed around a horizontal layout structure and you're going to spend a lot of unnecessary time writing CSS to override that or applying additional class declarations to override that behavior.
If you omit that component though you can achieve very similar results with minimum effort:
.navbar-right {
height: 100vh;
right: 0;
position: absolute;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<nav class="navbar-right bg-light p-3">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</nav>
position:absolute pulls your nav out of the normal document flow, allowing you to position it wherever (right:0 moves it to the right of the browser window). The height is set to 100vh which is 100% of the viewport height.
Now this is a pretty bare-bones example. You would likely want to apply specific widths, particularly with consideration to key breakpoints. But it should get you down the right path.