Make last two columns together without space


#1

How do I make the last two columns w/o any space in this JSFiddle :

http://jsfiddle.net/xjkf94qd/

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


#2

@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?


#3

@Jack_Tauson_Sr.

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>

#4

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


#5

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>

#6

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


#7

@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


#8

That’s what I said :slightly_smiling_face:

But I also wanted to show him how bootstrap makes things more complicated than it has to be.


#9

@Ray.H Sorry I just saw your code and not the rest of the message :banghead: My sincerest apologies. :slight_smile: Your solution is a nice one indeed and way simpler


#10

Thanks @donboe and @Ray.H for your valuable inputs. Appreciated !


#11

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 :slight_smile: Maybe a good idea to show your current website so we get an idea what is needed.

Just a suggestion :slight_smile:


#12

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