Using Bootstrap, how do I center my navigation bar?

Question

So I have this code below.

Using Bootstrap I would like to have this drop down on the left in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?

Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <!-- My CSS -->
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>

  <body>

    <!-- Navigation Bar -->
    <nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
        <div class="container-fluid">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav;">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">My Work</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact Me</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  </body>
</html>

Using Bootstrap I would like to have this drop down that is currently on the left... in the middle of the screen. https://screenshots.firefox.com/WKjwlW5eUiVdS0fO/null How would I do this?

Additional Question: How do I make the 3 lines bigger? Do I just make the navbar-toggler-icon bigger?

Welcome to stackoverflow. What have you tried to achieve this ? You should read this post before asking https://stackoverflow.com/help/how-to-ask — Sébastien Gicquel, Oct 19 '17 at 19:31
You appear to be using Bootstrap **Four**, not Bootstrap Three. I've updated your question to correct this. — Obsidian Age, Oct 19 '17 at 19:34

score 0 · Accepted Answer · answered Oct 19 '17 at 19:36

Setting the left and right margin to auto might work. Try this! mx-auto - says margin on the x-axis (ie., left and right) is set to auto!

  <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <!-- My CSS -->
        <link rel="stylesheet" type="text/css" href="css/style.css">
      </head>

      <body>

        <!-- Navigation Bar -->
        <nav class="navbar navbar-toggleable-md navbar-light bg-faded navbar-fixed-top">
            <div class="container-fluid">
                <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav;">
                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">My Work</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Contact Me</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
      </body>
    </html>

Hope this helps!

Yep! Thanks for the help :D I also had to add 'mx-auto' to each '
@ChristianHowe You're welcome. Please remember to vote up helpful answers: stackoverflow.com/help — Prathik, Oct 19 '17 at 23:00

score 0 · Answer 2 · answered Oct 19 '17 at 19:46

Bootstrap includes a flexbox grid system for building layouts. It’s based on a 12 column layout and has multiple tiers. It is basically a css class like any other. Bootstrap comes with these classes predefined.

For example:

<div class="col-lg-12">
      This would take up all available screen space
    </div>

Then all you have to do is center your content and you will end up with a div that takes up the area you want with content that is centered inside it.

The lg in this example stands for a large area, but there are several of these. They can be used in pairs to change the grid based on the available screen area. These col types are predefined and can be easily referenced.

Using this grid system is going to make whatever you create responsive. It is a joy to work with. I recommend you check it out.

Yeah I am just practicing different sections of Bootstrap, I was planning on looking at the grid system next :D — Christian Howe, Oct 19 '17 at 20:21

Using Bootstrap, how do I center my navigation bar?

2 Answers2