0

I am building a personal website with Bootstrap, but have come across an issue to which I cannot find a solution. I've looked at various tutorials and have just a basic skeleton of a simple webpage. However, it seems that the left end of the page extends beyond the left edge of the screen, and moving the scrollbar to the right, brings the page beyond the edge of the jumbotron header.

How do I center the page on the screen?

Here is my complete code:

<!DOCTYPE html>
<html>

    <head>
        <title>My Name</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
              rel="stylesheet">
    </head>

    <body>
        <div class="jumbotron text-center">
            <h1>My Name</h1>
        </div>

        <div class="row">
            <h2>What I've Been Up To</h2>
        </div>

    </body>

    <footer>
        <p> Copyright &copy;
        <!--Script displays the current year-->
        <script type="text/javascript">
            var d = new Date()
            document.write(d.getFullYear())
        </script>
        </p>
    </footer>

</html>

Screenshot of HTML Page

bavenafu
  • 27
  • 3

2 Answers2

1

When using bootstrap's grid system, your content should be in both row classed divs and then col-xx-xx classed divs. The rows have a -15px margin on the sides, which is why your content is pushed out of the container. That is to compensate for the 15px margins of the col classes, which is used for padding between multiple columns in a row. This is how it should look:

<div class="row">
    <div class="col-md-12>
        <h2>What I've Been Up To</h2>
    </div>
</div>

Note col-md-12 should be changed to the appropriate class for the screen size and column width you want in any given situation.

Check out the documentation for the grid system to get all the cool features. https://v4-alpha.getbootstrap.com/layout/grid/

sn3ll
  • 1,629
  • 1
  • 10
  • 16
0

Are you looking for something like this ?

https://jsfiddle.net/mergatroid/L2tLg3kj/

<div class="jumbotron text-center">
  <h1>Jumbotron Area</h1>
  <p>Area for a call to action or tagline...</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="box">
        <h3>Column 3</h3>
        <p>Lorem ipsum dolor..</p>
        <p>Ut enim ad..</p>
      </div>
    </div>
  </div>
</div>
MergatroidSA
  • 128
  • 1
  • 6