Question on the first example in the book Jump Start Bootstrap

Hi,

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 view port. Any help is appreciated. Thanks in advance!

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

Off Topic

Welcome to the forums, @wizdreamz.

When you post code on the forums, you need to format it so it will display correctly.

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

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 col-md-6 class for the wide screens and then let col-xs-12 take over for small screens…

e.g.

<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>

Thanks for both replies. I just realized that the class name of the container is “container” and not “container-fluid”. This is why the layout looked centered. Sorry, it is a newbie mistake. But thanks for taking the time to help me PaulOB and I will also keep TechnoBear’s suggestions in mind :slight_smile:

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.