Question on the first example in the book Jump Start Bootstrap

Discussion in 'Web Design' started by MateoLeo, Oct 4, 2017.

  1. MateoLeo

    MateoLeo Registered Member

    Joined:
    Sep 10, 2017
    Messages:
    6
    Likes Received:
    0
    I just started learning Bootstrap from the site point book 'Jump Start Bootstrap'. However, the very first example does not seem to work for me. I have in place all the linked files. The CSS, js etc...but the two columns in the code do not span the viewport. Any help is appreciated. Thanks in advance!

    HTML:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset ="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name = "viewport" width="width=device-width, initial-scale=1">
        <title>Bootstrap Grid System</title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/
        ➥3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/
        ➥1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-12 col1">
                    <h4>Column 1</h4>
                </div>
                <div class="col-xs-6 col2">
                    <h4>Column 1</h4>
                </div>
            </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="js/jquery-3.2.1.js"></script>
        <script src="js/bootstrap.js"></script>
    </body>
    </html>
     
  2. Andrew80

    Andrew80 Registered Member

    Joined:
    Sep 10, 2017
    Messages:
    6
    Likes Received:
    0
    I don't have that book but the class 'col-xs-12' is 12 columns wide which is what the grid is based on so that means its 100% wide and therefore you will get two rows and not two columns.

    If you want 100% wide on small screens and then 2 cols on wide screens you need to add a col-md-6 class for the wide screens and then let col-xs-12 take over for small screens.
    e.g

    Code:
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-6 col1">
          <h4>Column 1</h4>
        </div>
        <div class="col-xs-6 col-md-6 col2">
          <h4>Column 2</h4>
        </div>
      </div>
    </div>
     

Share This Page