CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3less
Malik Brahimi
Malik Brahimi

Reputation: 16711

Bootstrap Row Exceeds Container-Fluid

I'm trying to make a bootstrap navbar with 4 col-sm-3 in a row in a container-fluid parent item:

enter image description here

For some reason, there is this offset where the row exceeds the container width, as seen in the topleft of the image. Do any of you guys know how to correct this such that the website will still maintain the responsiveness? Here is my HTML and Less for reference:

<head>

    <meta charset = "utf-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">

    <title>Morocco</title>

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

    <script src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src = "https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    <script type = "text/javascript" src = "js/jquery.js"></script>
    <script type = "text/javascript" src = "js/bootstrap.js"></script>
    <script type = "text/javascript" src = "js/app.js"></script>

</head>


<body style = "background: #efefef">


    <!-- Navigation Bar -->


    <nav class = "navbar navbar-default">
        <div class = "container-fluid">


            <div class = "navbar-header">
                <button data-toggle = "collapse" data-target = "#nav-collapse" 
                    class = "navbar-toggle">
                        <span style = 'background-color: white' class = 'icon-bar'></span>
                        <span style = 'background-color: white' class = 'icon-bar'></span>
                        <span style = 'background-color: white' class = 'icon-bar'></span>
                </button>
            </div>


            <div id = "nav-collapse" class = "collapse navbar-collapse">
                <ul class = "nav navbar-nav">
                    <li><a href = "index.html">Home</a></li>
                    <li><a href = "about.html">About</a></li>
                    <li><a href = "itinerary.html">Itinerary</a></li>
                    <li><a href = "trip.html">Upcoming Trip</a></li>
                    <li><a href = "service.html">Community Service</a></li>
                </ul>
            </div>


        </div>
    </nav>


    <div class = "container-fluid">

        <div class = "row">
            <div class = "block col-sm-3" style = "background: #2980b9">Filler</div>
            <div class = "block col-sm-3" style = "background: #298bba">Filler</div>
            <div class = "block col-sm-3" style = "background: #2996ba">Filler</div>
            <div class = "block col-sm-3" style = "background: #29a1ba">Filler</div>
        </div>

    </div>


</body>


@import "variables.less";

@font-face
{
    font-family: Montserrat;
    src: url("../fonts/Montserrat.woff2");
}

@font-face
{
    font-family: Avenir;
    src: url("../fonts/Avenir.woff");
}

@font-face
{
    font-family: Proxima;
    src: url("../fonts/Proxima.otf");
}

@font-face
{
    font-family: Euclid;
    src: url("../fonts/Euclid.otf");
}

@font-face
{
    font-family: Besom;
    src: url("../fonts/Besom.ttf");
}

html, body
{
    width: 100%;
    height: 100%;
    margin: 0px auto;
    padding: 0px;
}

.container-fluid, .collapse
{
    margin: 0px auto;
    padding: 0px;
}

.navbar 
{
    text-align: center;
    font-family: Euclid;
    font-size: 14px;
    letter-spacing: 3px;
    margin: 0px auto;
    padding: 0px;
}

.block
{
    text-align: center;
    font-family: Proxima;
    font-size: 12pt;
    letter-spacing: 2px;
    padding: 20px 10px;
    color: white;
    margin: 0px auto;
}

Upvotes: 0

Views: 3170

Answers (1)

vanburen
vanburen

Reputation: 21653

This CSS rule is causing the issue: specifically container-fluid

.container-fluid,
.collapse {
  margin: 0px auto;
  padding: 0px;
}

This happens because you're removing the containers padding which will then cannot offset the negative margin that's applied to .row.

Bootstrap Grid CSS

.container-fluid {
  padding-right:15px;
  padding-left:15px;
  margin-right:auto;
  margin-left:auto
}
.row {
  margin-right:-15px;
  margin-left:-15px
}

*You'll also see overflow on you're collapsed nav so you may want to remove the rule altogether, not just the container-fluid part.

Update: The .collapse rule you have is interfering with the .navbar-collapse rule by removing the padding from it.

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

Working Example:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0px auto;
  padding: 0px;
}
body {
  background: #efefef;
}
.navbar.navbar-default {
  text-align: center;
  font-family: Euclid;
  font-size: 14px;
  letter-spacing: 3px;
  margin: 0px auto;
  padding: 0px;
}
.block {
  text-align: center;
  font-family: Proxima;
  font-size: 12pt;
  letter-spacing: 2px;
  padding: 20px 10px;
  color: white;
  margin: 0px auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <div class="navbar-header">
      <button data-toggle="collapse" data-target="#nav-collapse" class="navbar-toggle">
        <span style='background-color: white' class='icon-bar'></span>
        <span style='background-color: white' class='icon-bar'></span>
        <span style='background-color: white' class='icon-bar'></span>
      </button>
    </div>

    <div id="nav-collapse" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="about.html">About</a>
        </li>
        <li><a href="itinerary.html">Itinerary</a>
        </li>
        <li><a href="trip.html">Upcoming Trip</a>
        </li>
        <li><a href="service.html">Community Service</a>
        </li>
      </ul>
    </div>

  </div>
</nav>

<div class="container-fluid">
  <div class="row">
    <div class="block col-sm-3" style="background: #2980b9">Filler</div>
    <div class="block col-sm-3" style="background: #298bba">Filler</div>
    <div class="block col-sm-3" style="background: #2996ba">Filler</div>
    <div class="block col-sm-3" style="background: #29a1ba">Filler</div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Upvotes: 1

Related Questions