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>
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 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
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.
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.