How do I make the last two columns w/o any space in this JSFiddle :
For some reason, it’s showing one below another but on my website these tw oare showin horizontally in one line and there’s lot os space between two. I want to remove space between QuickLinks and Logout button
@Jack_Tauson_Sr. Did you resize the JSFiddle? Because when I did (above 990px) they are shown up in a row next to eachother. That is how Bootstrap reacts.
Edit: and what are these empty divs:
<div class="col-md-3 text-center"></div>
<div class="col-md-3 text-center"></div>Can you show us the site please?
Hi Jack. Since you are using Bootstrap, you can better achieve the desire result by using a navbar instead of a row and columns:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quick Links</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
</ul>
</div>
</div>
</nav>Thanks. I saw the similar behavior when I saw the fiddle in full screen which is exactly similar to what I am seeing on my website. Do you know why there’s so much space between the two? Unfortunately, it will be difficult to show the whole website here.
http://jsfiddle.net/xjkf94qd/show
The two empty divs you mentioned are there so that the Quicklinks and Logout parts stay at the right side. Thanks
Because your your divs are 25% width with text in the center.
That’s not the way to position elements with CSS, that’s what margins would help with.
In the old days you would have just floated the two links to the right. Now flexbox can do that easily too.
Use the navbar as @donboe suggested if you are going to use Bootstrap. You need to realize that when you use a framework like that you are responsible for learning how that framework works.
If you weren’t relying on bootstrap it would be as simple as this…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Page</title>
<style>
.menu {
display:flex;
justify-content: flex-end;
align-items: center;
margin:0;
padding:0;
list-style:none;
}
.menu li,
.menu button {
background:inherit;
color: #333;
margin: 0 1em;
padding: .5em;
font-size: 1em;
border: none;
cursor: pointer;
outline: none;
font-weight: bold;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">Dropdown item</a></li>
<li><button>Log Out</button></li>
</ul>
</body>
</html>
Hi Jack. Since you’re using Bootstrap. you can just replace what you had with what I showed you in post #3 and everything will be ok
@Ray.H Jack is using Bootstrap, why not just replace what he had with a nav as shown in Post #3 That way he doesn’t have to mix things up
That’s what I said 
But I also wanted to show him how bootstrap makes things more complicated than it has to be.
@Ray.H Sorry I just saw your code and not the rest of the message 
My sincerest apologies. 
Your solution is a nice one indeed and way simpler
One last thing @Jack_Tauson_Sr. I have to aggree with @Ray.H. If your not really familiar with Bootstrap it can be a pain Maybe a good idea to show your current website so we get an idea what is needed.
Just a suggestion
I see. Actually, I am little bit familiar with the Bootstrap but not much. The changes that were done above was done by someone who isn’t a developer. Otherwise, I would have done this in a better way if not the bootstrap side.
Hi @donboe,
So, I used your code and since I wanted to display the two list items on the right hand side, I added navbar-right and list-unstyled to remove bullet. So, your code with these two modifications is this now:
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto navbar-right list-unstyled">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropDown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Quick Links</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="/logout">Log Out</a></li>
</ul>
</div>
</div>
<div class="tab"> </div>
</nav>
However, it’s still not at the extreme right as shown in the image below:
I was expecting logout link to be somewhere at the highlighted section.
When I used @Ray.H 's solution, it showed up at correct place as shown in the image below:
Hi @Jack_Tauson_Sr. Sorry for the late responce. I was away for a short holiday. In the example I gave yout there was no extra div inside the navbar:
<div class="tab"> </div>Take that out and you should be ok
Edit: Im also not sure 'why you are using a class navbar-right on the navbar-nav? ml-auto is doing that allready assuming you are using Bootstrap 4. Just copy and past the example I gave you and you will see everything is just fine!
No problem. I’ll try to do that. I am using Bootstrap 3.
In that case you should make a few adjustments:
<nav class="navbar navbar-default">
<div class="container">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
// li items
</ul>
</div>
</div>
</nav>This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.