Skip to main content
K
kpmi
Known Participant
September 3, 2015
Question

How do I center the nav buttons?

  • September 3, 2015
  • 1 reply
  • 10977 views

Sorry to ask so many questions, but I'm finding Bootstrap tricky. Everything I knew how to do is now harder, it seems, and the way I knew doesn't work anymore.

Anyway -- I want to center the nav buttons (see screenshot below). I have tried everything I can think of. It would be nice if there were a property to align="center" for items, but apparently no one but me thinks it would speed things up.

Is it hidden in the Bootstrap CSS, or can I create an ID or class?

The code (without all the nav links) is:

<div class="container-fluid" id="wrapper">

  

  <!-- Header -->

    <header>

  <div class="row"><img src="images/header.jpg" class="center-block image-fill" alt="Kairos Prison Ministry"></div>

</header>

<!-- Navigation -->  

<nav class="navbar navbar-default dkblue col-lg-8 col-lg-offset-0">

    <!-- 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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

</div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse dkblue" id="defaultNavbar1">

      <ul class="nav navbar-nav bg-primary">

      

        <li> </li>

        <li> </li>

        <li><a href="#" class="whitetext">Home</a></li><li><a href="#" class="whitetext">Home</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle whitetext" data-toggle="dropdown" role="button" aria-expanded="false">About Us<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

          

            <li><a href="#">Our Core Values</a></li>

          </ul>

      </ul>

   

    

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

</nav>

</div>

This topic has been closed for replies.

1 reply

Nancy OShea
Nancy OShea
Braniac
September 3, 2015

You could try:

.navbar-nav {

    width: 100%;

    text-align: center;

}

.navbar-nav li {

      float: none;

      display: inline-block;

    }

Nancy O.

Nancy O'Shea— Product User, Community Expert &amp; Moderator
K
kpmiAuthor
Known Participant
September 4, 2015

My buttons are now nicely centered, but it's created a new issue. See screenshot. It only does this on the "About Us"  and "Contact Us" dropdowns. The others, coded exactly the same, work fine.

I tried adding:

.dropdown-menu li {

  text-align: left;

}

And I tried looking at the code on Chrome but I just can't see

1) Why some lists that are longer display perfectly while two others, coded exactly the same, don't, and

2) Why the Divider has disappeared (not a huge deal, but it's supposed to be there)

Code:

   <!-- Navigation -->   

<nav class="navbar navbar-default dkblue col-lg-12 col-lg-offset-0">

    <!-- 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="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>

</div>

    <!-- Collect the nav links, forms, and other content for toggling -->

    <div class="collapse navbar-collapse dkblue" id="defaultNavbar1">

   

      <ul class="nav navbar-nav bg-primary">

       

        <li> </li>

        <li> </li>

        <li><a href="#" class="whitetext">Home</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle whitetext" data-toggle="dropdown" role="button" aria-expanded="false">About Us<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

             <li><a href="#">Our History</a></li>

            <li class="divider"></li>

            <li><a href="#">Our Core Values</a></li>

            <li class="divider"></li>

            <li><a href="#">Board of Directors</a></li>

            <li class="divider"></li>

            <li><a href="#">Kairos Foundation</a></li>

            <li class="divider"></li>

            <li><a href="#">News</a></li>

            <li class="divider"></li>

            <li><a href="#">Videos</a></li>

          </ul>

        </li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Our Programs<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

             <li><a href="#">Kairos Inside</a></li>

            <li class="divider"></li>

            <li><a href="#">Kairos Outside</a></li>

            <li class="divider"></li>

            <li><a href="#">Kairos Torch</a></li>

            <li class="divider"></li>

            <li><a href="#">Our Impact</a></li>

            <li class="divider"></li>

            <li><a href="#">Testimonies</a></li>

          </ul>

        </li>

       

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Volunteer<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

             <li><a href="#">Ways to Serve</a></li>

            <li class="divider"></li>

            <li><a href="#">Creating Agape</a></li>

            <li class="divider"></li>

            <li><a href="#">Kairos Kalendar</a></li>

            <li class="divider"></li>

            <li><a href="#">Interest Form</a></li>

          </ul>

        </li>

       

         <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Where We Serve<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

             <li><a href="#">35 States</a></li>

            <li class="divider"></li>

            <li><a href="#">9 Countries</a></li>

          </ul>

        </li>

       

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Contact Us   <span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

             <li><a href="#">Email</a></li>

            <li class="divider"></li>

            <li><a href="#">Write</a></li>

            <li class="divider"></li>

            <li><a href="#">Phone</a></li>

  </ul>

        </li>

       

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Donate<span class="caret"></span></a>

          <ul class="dropdown-menu" role="menu">

             <li><a href="#">Donate Online</a></li>

            <li class="divider"></li>

            <li><a href="#">Cash Gifts</a></li>

            <li class="divider"></li>

            <li><a href="#">Planned & Estate Gifts</a></li>

          </ul>

        </li>

      </ul>

    

     

    <!-- /.navbar-collapse -->

  </div>

  <!-- /.container-fluid -->

</nav>

</div>

sinious
sinious
Braniac
September 4, 2015

kpmi wrote:

And I truly didn’t mean to start an argument for or against Bootstrap.

It's not really an argument - just an airing of strong views, always has been when Bootstrap is mentioned although I seem to be the only one around here that dislikes it or it could be that I'm much more familar with it than some of those that are using it.

I think its a shame when people turn to a framework to either save time or are forced to through company policy. I dont think frameworks are conducive to personal progress concerning coding ability myself and are quite restrictive in what they have to offer. You can eventually start becoming lazy and design to the restrictions of the framework rather than explore more interesting solutions.

You should at least stick with it and see if it suits your workflow before making an abrupt decision - who knows you might eventually think its the best thing since sliced bread.


osgood_ ~ (still on a phone waiting on my overdue car, forgive typos) Let me be really happy to say, you are absolutely in the correct forum. That was our purpose. Create a judgement free zone to express yourself with zero bias to product or technology.

Just do it in your own thread.

Feel completely free to post ALL of your thoughts on every single tech, framework, library or anything else related to development. I look forward to discussing all of this with you and everyone else. Heck I even posted a perpetual "while (true) {" post about anyone's daily stress, lessons or banter because I think eventually it will help me.

Just don't do it here.

The OP needs an answer to keep progress moving. Let's fix the problem, all eyes on the goal, within the existing situation.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices