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.


To fix this issue you have use class row properly.

You have not wrapped class row with class container.

Bootstrap provides grid system.

Bootstrap's grid system allows up to 12 columns across the page. You need to arrange your page width into that 12 columns.

It is not possible to explain all of here. Please refer following links.

Bootstrap grid template

Bootstrap grids

Tags:

Css

Width

Row

Twitter Bootstrap

Recent Posts