0

I can't center a navbar in Bootstrap 3 because I don't know how to edit CSS in Bootstrap. I downloaded Bootstrap locally, so I don't know if I need to edit the CSS file that is in the css folder of Bootstrap or if I should create my own CSS file. There is also more than one CSS file in the bootstrap folder. Which one do I need to edit?

I tried to edit the style directly in the Bootstrap html file, but nothing hapepnd on the website.

Fruit_alpha
  • 11
  • 1
  • 1
    Does this answer your question? [Bootstrap 3: How to make a centered navbar](https://stackoverflow.com/questions/18535441/bootstrap-3-how-to-make-a-centered-navbar) – OMi Shah Aug 29 '23 at 05:56
  • 1
    also: https://stackoverflow.com/questions/18777235/center-content-in-responsive-bootstrap-navbar – OMi Shah Aug 29 '23 at 05:57

2 Answers2

0

You can simply do it by adding flex properties to the parent of the navlinks so your code will look like:

.navbar-nav {
  width: 100%;
  display: flex;
  justify-content: center;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default" role="navigation">
  <div class="container">
    <!-- Navbar content here -->
    <ul class="nav navbar-nav">
      <li class="active"><a href="javascript:void(0)">Home</a></li>
      <li><a href="javascript:void(0)">About Us</a></li>
      <li><a href="javascript:void(0)">Contact Us</a></li>
    </ul>
  </div>
</nav>
Yudiz Solutions
  • 4,216
  • 2
  • 7
  • 21
0

As I understand, you are using a precompiled version. The latest available version for Bootstrap 3 is 3.3.7.

You should link this CSS file dist/css/bootstrap.min.css in your HTML.

<link href="css/bootstrap.min.css" rel="stylesheet">

You should not edit it!

All custom changes must go in your own CSS file. You should link it in your HTML after linking to Bootstrap. This is very important. Otherwise, changes will not be applied.

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

If you don't see your changes, there can be a few reasons.

  1. Check that CSS files are loaded. You see this in the browser's inspector(DEV tools for your browser)
  2. Check that your CSS file is included after bootstrap.css
  3. Check the CSS selector for the HTML element you are trying to customize. Sometimes you have to override exactly the same selector (ex.: ".navbar .navbar-header .navbar-brand {...}")
  4. Try to clear the browser cache
  5. The problem might be in some browser extensions. In this case, try to see this page in incognito mode(extensions do not work by default in incognito)

More info about CSS you can find there (MDN docs)

Also, it will be good to read bootstrap docs

serdiuk
  • 1
  • 1