Menu
I am just a beginner in Twitter Bootstrap.
I am trying to use its grid functionality by using classes span and offset.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
ul.unstyled > li {
list-style-type: none;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="row">
<div class="span3 offset5">
<ul class="unstyled">
<li>
<label for="optionsRadios1">A.</label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Option 1
</li>
<li>
<label for="optionsRadios2">B.</label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Option 2
</li>
<li>
<label for="optionsRadios3">C.</label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">option3</li>
<li><label for="optionsRadios4">D.</label>
<input type="radio" name="optionsRadios" id="optionsRadios4" value="option4">option4</li>
<li><label for="optionsRadios5">E.</label>
<input type="radio" name="optionsRadios" id="optionsRadios5" value="option5">option5</li>
</ul>
</div>
</div>
<div class="row">
<div class="span3 offset5">
<input type="checkbox">Mark To review</input>
</div>
</div>
</body>
</html>
Can anyone please tell me where I am mistaking? I am not getting offset margin in my webpage.
I used code described in Bootstrap example http://twitter.github.io/bootstrap/scaffolding.html#gridSystem My HTML webpage code is
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<div class="row">
<div class="span9">
Level 1 column
<div class="row">
<div class="span6">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</body>
</html>
And I am not getting my page with no margins or offsets. Here's the screenshot:
I am unable to point where the problem is.
971
You will have to wrap your <div> elements inside a <div class="row"> element. this should do the trick. Have a look at the examples at http://twitter.github.io/bootstrap/scaffolding.html#gridSystem to learn more.
<div class="row">
<div class="span4">...</div>
<div class="span3 offset2">...</div>
</div>
Also you do not close your <input> elements, which might yield undesired results. Finally I can't find any import of Bootstrap's CSS file. Hence, the styles for the grid systems are not available in your web page.
Here is a working jsFiddle: http://jsfiddle.net/VTbAA/1/
Again, you are missing your CSS import. It works fine as soon as you add Bootstrap's CSS file. Note that you are also missing to close some <div> elements. Furthermore, Bootstrap provides a 12-based grid system. Hence your columns should add up to 12.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<div class="span12">Level 1 column</div>
</div>
<div class="row">
<div class="span6 offset3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</body>
</html>
The important line is the import statement:
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css">
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
