CODEWITHSUNDEEP
twitter-bootstrap
RKCY
RKCY

Reputation: 4135

My Grid system using bootstrap is not working properly

I wrote simple grid system using bootstrap and compiled in chrome. but those grid system is not displaying properly.

code:-

<!doctype html>
<html>
<head>
<title>Gris system</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<style>
{margin:0px;padding:0px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-md-1" style="background-color:lavender;">col-md-1</div>
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
<div class="col-md-1" style="background-color:lavender;">col-md-1</div
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
<div class="col-md-1" style="background-color:lavender;">col-md-1</div
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
</div>
</div>
</body>
</html>

And my output is :-

issue in browser

working code:-

<!doctype html>
<html>
<head>
<title>Gris system</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<style>
{margin:0px; padding:0px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class=" col-md-1" style="background-color:lavender;">col-md-1</div>
<div class="col-md-3" style="background-color:skyblue;">col-md-3</div>
<div class="col-md-1" style="background-color:yellow;">col-md-1</div>
<div class=" col-md-3" style="background-color:lavender;">col-md-1</div>
<div class="col-md-1" style="background-color:blue;">col-md-3</div>
<div class="col-md-3" style="background-color:skyblue;">col-md-1</div>
</div>
</div>
</body>
</html>

working code

Upvotes: 1

Views: 1298

Answers (1)

Pepelius
Pepelius

Reputation: 1609

You seem to have some CSS in your <style> tags which does not point to anything specific. My guess would be that the margin and padding are affecting something they're not supposed to.

Try removing that styling, otherwise everything seems all right. If it does not work, you should double-check that the Bootstrap is in fact loaded with your page.

EDIT: Two of your columns are actually missing a closing > tag after div. Double-check your closing </div> tags.

Upvotes: 1

Related Questions