Bootstrap row width

css twitter-bootstrap width row

42,104

Solution 1

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.

Solution 2

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

Solution 3

Please wrap it in bootstrap .container class and then check if the problem still persists.

<body>
<div class="container">
  //your content goes here
</div>
</body>

Solution 4

If you're using bootstrap 4,just add m-0 class to your row instead of wrapping it in an other div.It removes the margin.

Solution 5

Maybe you have to add the grid of the bootstrap css?

Look to this example

http://getbootstrap.com/examples/grid/

View more solutions

42,104

Author by

Adrian Devder

Updated on August 19, 2020

Comments

Adrian Devder almost 4 years

I have the following HTML:

<!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>
    <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>
</body>

</html>

For some reason the entire web page is wider than the browser window. When I remove the row class everything goes back to normal. The local CSS file has nothing to do with the issue. My guess is that the bootstrap CSS modifies the row in a way that makes it wider for some reason. So I wanted to ask if anyone has any idea that would fix this.