How do I make the Brand, links, and facebook link on the same line? Bootstrap 3


Tags: html5,twitter-bootstrap,css3

Problem :

I changed my Code. I moved the Facebook link into its own <ul> bracket and then did a .navbar-right class for that <ul> element. This moved the facebook link to the right side just as I wanted. I deleted my CSS code that I had before. Now I am trying to get the Links to center on the screen with the brand on the left. How do I center the links?

<body>

<nav class="navbar navbar-default navbar-inverse navbar-fixed-top ">
	<div class="container-fluid" id="center-nav">
		 
		 <!-- Brand and toggle get grouped for better mobile display -->
		 <div class="navbar-header">
		 	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		 		<span class="sr-only">Toggle navigation</span>
		 		<span class="icon-bar"></span>
		 		<span class="icon-bar"></span>
		 		<span class="icon-bar"></span>
		 	</button>
		 	<a class="navbar-brand" href="#">Brnich Karate</a>
		 </div>
		 
		 <!-- Collect the nav links, forms, and other content for toggling -->
		 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		 	<ul class="nav navbar-nav">
		 		<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
		 		<li><a href="#">Link</a></li>
		 		<li><a href="#">Link</a></li>
		 		<li><a href="#">Link</a></li>
		 	</ul> 
		 	
		 <ul class="navbar-right"> 
           		<li class="social"><a href="#" class="btn btn-inverse btn-lg"><i class="fa fa-facebook-square"></i>Find us on Facebook</a></li>
             </ul>
		 	
		 </div>
		 
		 
	</div>
</nav>


<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

</body>



Solution :

You need to move your facebook link to a seperate <ul> list within your navbar and pull it right using navbar-right.

<ul class="nav navbar-nav">
    <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
 </ul> 
 <ul class="nav navbar-nav navbar-right">
    <li class="social">
        <a href="#" class="btn btn-inverse btn-lg">
            <i class="fa fa-facebook-square"></i>Find us on Facebook
        </a>
    </li>
</ul> 

Then you need to set your navbar to center it's content as per this question: Center content in responsive bootstrap navbar

@media (min-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
       text-align: center;
    }
}

See Demo JSFiddle: https://jsfiddle.net/o8xyq519/1/


    CSS Howto..

    How to control the postioning of a fieldset with css?

    How to take an element over to given padding with CSS

    How much media queries?

    How does tablesort.js create the sort indicator arrows

    How to make liquid layout in css using em?

    how to repeat a small background image througout the page?

    How to wrap a DIV around a DIV with CSS

    How to alter ionic's nav-bar size?

    How to float: top?

    How to center a child div with a smaller parent div

    How to make horizontal division using html div tag and css

    How to animate searchbox length from focusing on the textbox class CSS3?

    how can I align text/image/links within a grid
    of the twitter bootstrap css?

    How to have full page that is not a background img or fixed positioned?

    How can I remove a bootstrap buttons hover effect?

    How do I simplify this header with lines on the side, so that it doesn't need css3 background properties?

    How to change css on link current class

    How to remove unnecessary margin on top?

    jquery how to make an element comeback to initial position after animation

    how to write this code as link click animation

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How to check if style ID contains certain css selectors?

    How to cancel specific one element at external CSS?

    How to create a level 4 submenu with this css?

    How to make controlls for epub using HTML 5,JavaScript and CSS?

    How to center a block of social icon background images?

    How to pull all CSS rules on an element together

    How to color specific word in a container using CSS

    How to override css class without touching the HTML?

    how to make a css “if opera,not…”