CODEWITHSUNDEEP
htmlcssbootstrap-4
Jacob Armstrong
Jacob Armstrong

Reputation: 49

How to remove padding on Bootstrap navbar

I'm new to bootstrap, so forgive any blatant ignorance in advance. I can't seem to get rid of the "padding" (red circle) around the content inside of the .container-fluid. I can see that the .container-fluid is truly utilizing the entire width of the screen (gray background), but everything inside of it has padding that I cannot get rid of, except for the <p> tag in the row 2, column 1 (blue square). I don't understand why that's happening either. How do I get rid of the unwanted padding, and why is it not happening to the <p> tag?

Note: this is mirrored on the right side (unwanted padding).

example

.container-fluid {
    padding: 0 0 0 0;
    margin-right: auto;
    margin-left: auto;
}
.row {
    margin-left: 0;
    margin-right: 0;
}
.col {
    margin-left: 0;
    margin-right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div class="container-fluid" style="background-color: gray;">
    <div class="row">
        <div class="col">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <a href="index.php" class="navbar-brand">%company name%</a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.php">Home</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-1">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
            <p>left nav-bar</p>
        </div>
        <div class="col-xs-11">
            <p>main content</p>
        </div>
    </div>
</div>

Upvotes: 1

Views: 7135

Answers (3)

Pablo
Pablo

Reputation: 6048

The answer is simple: you do not have to wrap the navigation bar in a container.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a href="index.php" class="navbar-brand">%company name%</a>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.php">Home</a>
        </li>
      </ul>
    </div>
  </nav>
<div class="container-fluid" style="background-color: gray;">
  <div class="row">
    <div class="col-xs-1">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
      </ul>
      <p>left nav-bar</p>
    </div>
    <div class="col-xs-11">
      <p>main content</p>
    </div>
  </div>
</div>

Upvotes: 4

kapitan
kapitan

Reputation: 2212

Always put !important to your css code.

What this does is that it will override any predefined CSS styling - which is in this case is coming from the bootstrap.css file.

.container-fluid {
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.row, .col {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

Upvotes: 1

DataCure
DataCure

Reputation: 425

Bootstrap has a heep load of predefined styles, simply add !Important at the end of your padding style

Padding: 0 !important;
Margin: 0!important;

Answer provided on my cell phone, when in on a desktop i can re write your script

Upvotes: 0

Related Questions