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
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 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
Can I make all Bootstrap classes in the main DIV instead of assigning them to each DIV or INPUT, for instance, this is the normal Bootstrap navbar, I'm assuming if possible to collect all the classes in the DIV, I've heard about it but didn't find it anywhere. Thanks
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item active"><a class="nav-link" href="./aboutus.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="#">Menu</a></li>
<li class="nav-item"><a class="nav-link" href="contactus.html">Contact</a></li>
</ul>
</div>
I'm not sure if you're asking specifically about bootstrap, i.e., whether or not those two classes can be used together or if you're just asking in general?
You can apply as many classes to an element as you want, just separate class names with space
<div class="active dropdown-toggle custom-class"></div>
but only a single id:
<div id = "btn1 btn"> <!-- this is wrong --> </div>
I have tried the following code,
<ul class="nav nav-tabs">
<li class="nav-item" id="web1Tab"><a class="nav-link active" data-toggle="tab" id="w1" href="link_to_website_1">Website1</a></li>
<li class="nav-item" id="web2Tab"><a class="nav-link" data-toggle="tab" id="w2" href="link_to_website_2">Website2</a></li>
</ul>
It did look just like as I expected, however href doesn't work. On the other hand, if I remove the data-toggle="tab" part then href's work properly but active tab doesn't change. I guess that, href in this case only supports inner linking? I am not sure. The code looks very simple but I was unable solve it.
Can you try surrounding your entire list item with a href?
<ul class="nav nav-tabs">
<a style="display:block" href="your_url1_here">
<li class="nav-item" id="web1Tab">Website1</li>
</a>
<a style="display:block" href="your_url2_here">
<li class="nav-item" id="web2Tab">Website2</li>
</a>
</ul>
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.