Solution 1 :
You should never update the bootstrap classes, you need to correctly use them.
You have to use flex-grow-0 and text-right like below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex w-100">
<a href="index.html" class="navbar-brand mr-auto">Gb32</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-0" id="navbarMenu"> <!-- here -->
<ul class="navbar-nav text-right"> <!-- here -->
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="home__navbar">Home</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="about__navbar">About</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="skills__navbar">Skills</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="skills__navbar">History</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="contact__navbar">Contact</a>
</li>
</ul>
</div>
</nav>
Solution 2 :
Add this
.ml-auto {
left: auto !important;
flex-basis:auto!important;
}
https://jsfiddle.net/csuzpq3o/
Problem :
cant solve this simple problem,
1 – Why if I add a nav_element css idependent class and set the flex and justify-content:between to create space between the anchor tag and the div does not work?
2 – What should be this correctly approach in bootstrap?
3 – Do I need “d-flex” on navbar bootstrap property?
<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex w-100">
<a href="index.html" class="navbar-brand mr-auto">Gb32</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarMenu">
<ul class="navbar-nav">
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="home__navbar">Home</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="about__navbar">About</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="skills__navbar">Skills</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="history__navbar">History</a>
</li>
<li class="nav-item navbar-el">
<a href="" class="nav-link" id="contact__navbar">Contact</a>
</li>
</ul>
</div>
</nav>
Thanks guys! I will try to leave a fiddle, but I’m not sure the resources will keep.
https://jsfiddle.net/guibrother32/bn1qtfuc/2/
Comments
Comment posted by Avinash Dalvi
what you exactly want to do ? and if you are using bootstrap add in internally in fiddle
Comment posted by Guibrother32
I added mate, I’m not sure why its not keeping when I try to share the url link. I’m trying to create space between the anchor tag and the div > ul. Like Gb32 ——————————————————— About Skills History….
Comment posted by Avinash Dalvi
jsfiddle doesnot have can you tell me which boostrap cdn using ? you want be align in same line ? right now i can see div is below GB32
Comment posted by cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
Comment posted by Avinash Dalvi
added solution @Guibrother32
Comment posted by Avinash Dalvi
Upvoting this because this is perfect answer, My answer was hack one.
Comment posted by Guibrother32
I saw it worked on jsfiddle mate, although it doesnt work on my project. Should I just add it on my css file?
Comment posted by Avinash Dalvi
just added it let me know what is issue coming. Dont forget to accept answer if this help you.
Comment posted by gb32.herokuapp.com
I deployed it, can you have a look? Not working on this application, not sure why
Comment posted by Avinash Dalvi
add this
Comment posted by Avinash Dalvi
i tried playing with ml-auto css which is stopping me to align left side.
Post navigation
