I have added my own classes along bootstrap using backtick butt its not working.
e.g
<nav className=`navbar navbar-expand-lg navbar-light bg-light ${classes.navStyle}`></nav>
Here' the extra class(classes.navStyle) is not applied.
Kindly tells possible solution for (component-level-css) when using bootstrap in Reacjs Projects
Possible solution for component-level-css when using bootstrap in project
I'm using reactstrap and have been following this link:
https://reactstrap.github.io/components/navbar/
In the example, the <nav className='ml-auto' navbar> is pushing the <NavItem> to the right. However, what I am trying to implement (which is really similar to the example) the <NavItem> is rendering right next to the <NavbarBrand>.
I've checked the syntax like 100 times and it looks correct. The custom CSS I have, which is very little, does not seem to be overriding anything. The CSS in the console looks pretty similar and it appears to be affected by the:
.ml-auto, .mx-auto {
margin-left: auto!important;
}
At least toggling it off in the console in the example, moves the <NavItem> right next to the <NavbarBrand> like it is in my app (which I don't want). Here is what I am looking at:
Reactstrap Example (correct spacing):
Console for my app (incorrect spacing):
How do I get the spacing right in my app?
It really isn't clear to me what is affecting margin-left: auto !important to work in one and not the other.
For Bootstrap-5 we have to use ms-auto instead of ml-auto
Starting from Bootstrap 5 2021, There are some changes in the side names of spacing utilities.
Margin Left is now called Margin Start, therefore use ms instead of ml
Example: For setting margin-left to auto : use ms-auto
Similarly for setting margin left to 3 : use ms-3 instead of ml-3
You can learn more about the new side names for margins and paddings in the official bootstrap documentation BootStrap Spacing Utilities
The navbar components (and many other components) will only work if you use them the way they've been designed to be used.
For example, ml-auto works on sibling elements.
It does NOT work if you destroy that sibling relationship.
In other words, you cannot just randomly wrap elements in unnecessary divs.
Remove the div you put around the navbar-toggler and the collapse component to make the sibling selector work as intended.
Also: Do NOT use the !important flag as a permanent solution in any of your custom css. That flag is for quick testing only.
P.S. You seem to have a habit of wrapping things in unnecessary divs. The container is also wrapped in such a useless div. Don't add unnecessary code for some sort of "esthetics". Only add code if it actually does something and use comments for everything else.
Explanation on how ml-auto works.
It appears this was already resolved in the comments. I just wanted to add an explanation that ml-auto was not working because it's flexbox parent needs to be full-width of the navbar. So, it could have also been solved by adding w-100 to the extra div..
<nav class="navbar navbar-expand-md navbar-light bg-faded">
<a class="navbar-brand" href="#">reactstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="w-100">
<div class="navbar-collapse collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
...
</ul>
</div>
</div>
</nav>
ml-auto works because of the way the flexbox parent "shrinks" the child block element(s) by default. It has nothing to do with sibling elements, and would work fine with just one child in the flexbox parent: https://www.codeply.com/go/xPaoNJMzbG
Here's a good article on how auto-margins work with flexbox
In Bootstrap-5 there are some changes, earlier it was ml-auto for margin-left:auto which is now changed to ms-auto, similarly mr-auto is changed to me-auto. However for top and bottom it is same as earlier versions of bootstrap i.e versions before bootstrap-5
for more details visit docs
I am using bootstrap#5.0.X
If you are stuck with this problem in 2021,
It is because there has been migration and changes in the class name.
.ml-* and .mr-* to .ms-* and .me-*.
similarly many others class name has been changed.
Link to check migration
Bootstrap Migration link
I am wanting a topbar that is hover for non-touch devices and click for touch devices.
I have achieved this by doing it this way:
<nav class="top-bar show-for-touch" data-topbar role="navigation" data-options="is_hover: false">
<!-- menu -->
</nav>
<nav class="top-bar hide-for-touch" data-topbar role="navigation" data-options="is_hover: true">
<!-- menu -->
</nav>
However there must be a cleaner way of doing it without repeating the entire menu twice, I have searched the documentation and online and have not found anything.
CSS
:hover
will work as hover on non touch devices and still work as click or tap on touch devices...If iam not mistaken
Is it possible to set the navbar collapse breakpoint for a particular navbar in Bootstrap 3? I have a sub-navbar on my site that looks great down to 500px, and I'd rather not settle for a btn-group.
What I have right now: I've set up an ID for my navbar, and I'd like to use #toolbar .navbar{ to target that ID. Is there anything in Bootstrap that would allow me to target this selectively?
<div class="navbar navbar-default" id = "toolbar">
<ul class="nav navbar-nav">
<li> Back</li>
<li> Add</li>
<li> Delete</li>
</ul>
</div>
From the Bootstrap docs:
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
In order to create your own media query, you'll need to look at the LESS here and create your own rules for #toolbar.
I'm an experienced software engineer just getting into web dev and I'm having some issues getting bootstrap 3 row-fluid to work correctly. Basically, I'm trying to get a side navigation bar and an angular application to work together in a fluid layout, but when I attempt to use row-fluid, it is stacking the two elements instead of putting them side by side. Here is the code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li class="nav-header">Administer</li>
<li class="active">Users</li>
<li>Devices</li>
</ul>
</div>
<div class="span9">
<div ng-view></div>
</div>
</div>
</div>
Also interesting is if I change row-fluid to row, the same behavior persists. Changing spanX to col-lg-X fixes it, but I lose the fluid layout. any ideas?
Use .col-md-* instead of .span*
Bootstrap 3 is responsive by default, so there is no need for the -fluid. you can just use row and container.
And the span classes you are using are from bootstrap 2.x not 3. you need to use something like col-lg-4 or col-xs-4. check out the bootstrap 3 docs for more info on this.
See here for more info on the Bootstrap 3 grid system