Bootstrap Fluid Row Width

bootstrap fluid row width

They start with three values, which can be user-defined:

@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;

Edit: on Bootstrap 3.0+, the variables are now:

@grid-columns
@grid-gutter-width
@grid-float-breakpoint   // the point at which the navbar stops collapsing

And calculate fixed row width:

@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Then they go fluid:

@fluidGridColumnWidth: percentage(@gridColumnWidth/@gridRowWidth);
@fluidGridGutterWidth: percentage(@gridGutterWidth/@gridRowWidth);

And finaly, generate all the spans (that is a bit confusing):

.spanX (@index) when (@index > 0) {
  (~".span@{index}") { .span(@index); }
  .spanX(@index - 1);
}

.span (@columns) {
      width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
      *width: (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)) - (.5 / @gridRowWidth * 100 * 1%);
}

.row-fluid {
  // generate .spanX and .offsetX
  .spanX (@gridColumns);
  .offsetX (@gridColumns);
}

As you see, LESS does the divisions and multiplications.

See it yourself:

https://github.com/twitter/bootstrap/blob/master/less/variables.less
https://github.com/twitter/bootstrap/blob/master/less/mixins.less

Bootstrap container-fluid isn't the whole width of the screen

Bootstrap containers are padded.

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

You need to remove the padding.

.container-fluid {
    padding-right:0;
    padding-left:0;
    margin-right:auto;
    margin-left:auto
 }

Edit: This is a bare bones example. If you copy this and paste into a new .html document you'll see no padding on the container. If you then remove the container-fluid override you'll see padding.

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    
        <!-- put your override styles here - AFTER you include Bootstrap -->
        <link href="style-mobile.css" rel="stylesheet">

    </head>
    <style>
        /* override Bootstrap's container */
        .container-fluid {
            padding-right:0;
            padding-left:0;
            margin-right:auto;
            margin-left:auto
         }
    </style>
    <body>
    
        <div class="container-fluid">
            This text hits the left side of the viewport.
        </div>
    
    </body>
</html>

Edited HTML example to include new css link

Edit: Bootstrap 4

@Dagrooms commented: "The best way to do this in Bootstrap 4 is to add px-0 to your container-fluid div."

This will remove the padding from the left and right of the container, so that it will touch the sides of the browser viewport.

<div class="container-fluid px-0">
    This text hits the left side of the viewport.
</div>

Why does this happen with .row and .container-fluid in bootstrap?

As @Tom suggests, the width of the row elements is "determined" (via css) for you as part of the package. So when one sets the width explicitly even to 100% they are working against what bootstrap is doing. The rose row is the required 30px wider than the blue. I believe that would be true even without the bootstrap javascript but I added it for completeness.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container-fluid">

  <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></div>

  <div class="row" style="background-color: mistyrose; height:50px;"></div>

  <div class="row" style="background-color: aliceblue; width:100%; height:50px;"></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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Bootstrap container, grid rows width and a padding issue

your class name wrong col_xl-12 to change class name col-xl-12

Sample Image

https://v4-alpha.getbootstrap.com/layout/grid/

Bootstrap row width

You may either use .container class or .container-fluid.
.container maintains some margin space from actual screen and don't stretch the page view. On the other hand .container-fluid stretches the page as it can.
See your html script modified below:

<!DOCTYPE HTML>
<html>

<head>
    <link rel="stylesheet" href="STYLE.css">
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>

<body>
<div class="container">
    <header class="row"></header>
    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>
    <section class="row section2"></section>
    <section class="row section1"></section>

    <footer class="row"></footer>
</div>
</body>

</html>

Also, you must use .col-md-6 like class to specify width of your section within a row where md is replaceable by lg and sm as well.

md stands for Medium sized devices like laptop,desktop etc.

lg stands for Large sized Devices like projector or some bigger screens etc.

sm stands for Small sized devices like mobiles etc.

You are free to use a combination of these three. For example,

<div class="container-fluid">
    <div class="row">
       <div class="col-md-6 col-sm-1 col-lg-12">

       </div>
    </div>
</div>

Hope it helps you get started and resolve your problem.

Bootstrap Row Exceeds Container-Fluid

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>

Bootstrap row does not fill width of screen, when hidden/displayed based on a breakpoint

Instead of using d-md-block you can use d-md-flex:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="container-fluid">

    <div class="row d-none d-md-flex">

        <div class="col-auto">

            <div class="menu_circle">Link 1</div>

        </div>

        <div class="col-auto">

            <div class="menu_circle">Link 1</div>

        </div>

        <div class="col-auto">

            <div class="menu_circle">Link 1</div>

        </div>

        <div class="col-auto">

            <div class="menu_circle">Link 1</div>

        </div>

    </div>

</div>

Bootstrap Fluid Row Width