I am trying to have my buttons be beside each other at all display sizes.However when I make my window smaller, they overlap each other as shown in the jsfiddle.
I have tried using col-xs-offset and col-xs-push but it affects my col-md and col-lg settings for some reason, I have checked my bootstrap and html but there doesn't appear to be any issues there.
How can I fix this?
JSFiddle: /
HTML:
<div class="container">
<div class="row upperRow">
<nav class="nav logoFw">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<a href="../mainpage/home.php" class="brand navbar-brand "> <img src="../image/logo.jpg" class="img-responsive" alt="logo"></a>
</div>
</nav>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">
<a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i>Job Seeker
</a>
</div>
</li>
<li>
<div class="col-xs-3 col-md-4 col-lg-4">
<a href="../employer/signupLoginEmp.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>Employer
</a>
</div>
</li>
</ul>
</div>
<div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div>
<div class="row bottomRow">
<div class="col-sm-12 col-md-12 col-lg-12">
<nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="nav-collapse" class="collapse navbar-collapse topmenu">
<ul class="nav navbar-nav center-block">
<li><a href="../mainpage/home.php">Home</a></li>
<li><a href="../mainpage/about.php">About</a></li>
<li><a href="#">Job</a></li>
<li><a href="../mainpage/resources.php">Resources</a></li>
</ul>
</div>
</nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
</div>
</div> <!-- end middle row -->
<!--to indicate which page user is on -->
</div><!-- end container -->
I am trying to have my buttons be beside each other at all display sizes.However when I make my window smaller, they overlap each other as shown in the jsfiddle.
I have tried using col-xs-offset and col-xs-push but it affects my col-md and col-lg settings for some reason, I have checked my bootstrap and html but there doesn't appear to be any issues there.
How can I fix this?
JSFiddle: https://jsfiddle/whywymam/2u79tpp2/1/
HTML:
<div class="container">
<div class="row upperRow">
<nav class="nav logoFw">
<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
<a href="../mainpage/home.php" class="brand navbar-brand "> <img src="../image/logo.jpg" class="img-responsive" alt="logo"></a>
</div>
</nav>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="col-xs-3 col-sm-4 col-md-4 col-lg-4">
<a href="../jobseeker/signupLogin.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i>Job Seeker
</a>
</div>
</li>
<li>
<div class="col-xs-3 col-md-4 col-lg-4">
<a href="../employer/signupLoginEmp.php" class="btn btn-danger" role="button">
<i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i>Employer
</a>
</div>
</li>
</ul>
</div>
<div class="clearfix visible-xs-block visible-md-block visible-sm-block visible-lg-block"></div>
<div class="row bottomRow">
<div class="col-sm-12 col-md-12 col-lg-12">
<nav role="navigation" class="navbar-inner navbar-default navbar-static-top navcolor">
<div class="navbar-header ">
<!--button to appear when display is on mobile device-->
<button type="button" data-target="#nav-collapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="nav-collapse" class="collapse navbar-collapse topmenu">
<ul class="nav navbar-nav center-block">
<li><a href="../mainpage/home.php">Home</a></li>
<li><a href="../mainpage/about.php">About</a></li>
<li><a href="#">Job</a></li>
<li><a href="../mainpage/resources.php">Resources</a></li>
</ul>
</div>
</nav> <!-- end navbar-inner navbar-default navbar-static-top navcolor -->
</div>
</div> <!-- end middle row -->
<!--to indicate which page user is on -->
</div><!-- end container -->
- 2 First, any direct child of a row should have a col-xx class. next, I would try using btn-group, or perhaps with btn-toolbar, rather than the li and div stuff. You need to spend some time with the Bootstrap docs. It will not do what you want if you do not follow the rules. It will actually make your life harder. – BJ Safdie Commented Jul 10, 2015 at 0:54
- You should apply the col-*- to the <li> itself rather than put a div inside each <li>. However the text in the button will obviously overflow in smaller screens. – Gabs Commented Jul 10, 2015 at 0:54
1 Answer
Reset to default 5You may want to remove the unordered list that is containing your buttons and instead use a button group:
http://getbootstrap./ponents/#btn-groups
Also, since button groups make the buttons flush to each other, use some CSS to override their margins.
JS Fiddle:
https://jsfiddle/1dwq7bqx/
CSS
.btn-group button { margin: 0 7px; }
HTML
<div class="container">
<div class="row">
<div class="col-md-4 text-left">
<img src="logo.jpg" class="img-responsive" alt="logo" />
</div>
<div class="col-md-8 text-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i> Job Seekers</button>
<button type="button" class="btn btn-danger"><i class="glyphicon glyphicon-user"></i><i class="glyphicon glyphicon-user"></i> Employers</button>
</div>
</div>
</div>
</div>