How do you tell which css class to modify?[Example inside]

Question

I am working with bootstrap, and I have for example this code snippet :

 <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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="#">Start Bootstrap</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>
                        <a href="#">Symptoms</a>
                        <li class="divider-vertical"></li>
                    </li>
                    <li>
                        <a href="#">Services</a>
                        <li class="divider-vertical"></li>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                        
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

I can see the navbar, navbar-inverse, navbar-fixed-top, container, navbar-header, navbar-toggle, sr-only, icon-bar,navbar-brand, collapse, navbar-collapse, nav navbar-nav, etc...

So - Lets say I want to align the list in this code to the center. Which class, of the 12+ classes, do I have to modify with text-align? Is there a way of "backtracking" through the divs to see which one to change? The class that directly contains the list is nav navbar-nav, but if I change : .navbar-nav > li > a to include text-align:center; , nothing happens. Which must mean that I changed the wrong class.

If you know a way of determining which class to change, I appreciate it!

Thank you.

Get familiar with either FireFox's Firebug, or Chrome's dev tools to intuitively answers questions such as these; it will make your life so much easier. — rsn

Rachel S Rachel S · Accepted Answer · 2016-05-24T16:46:56

As rsn said in a comment, the best way is to install a developer tool that comes with the browsers. I personally like the Chrome one but the Firefox one works well too. You can select an individual item on your page using the select icon (arrow pointing to a box) and see what styles are attached to it. If you're trying to change padding, look at which element on your page has the padding, and then change that class.

How do you tell which css class to modify?[Example inside]

3 Answers