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>

Tags:

Css

Twitter Bootstrap

Recent Posts