Hi Friends...
The Bootstrap grid system provides easy way to create the layouts of the web pages. As opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Bootstrap 3 includes predefined grid classes for quickly design grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>C# jadu | Bootstrap Grid Syatem</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.style{
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #ffd800;
margin-bottom: 10px;
}
.style.color{
background: #DB6B11;
}
</style>
</head>
<body>
<!-- Open the output in a new tab and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<br />
</div>
<div class="row">
<div class="col-sm-6">
<div class="style">.col-sm-6</div>
</div>
<div class="col-sm-6">
<div class="style color">.col-sm-6</div>
</div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4">
<div class="style">.col-sm-4</div>
</div>
<div class="col-sm-8">
<div class="style color">.col-sm-8</div>
</div>
</div>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3">
<div class="style">.col-sm-3</div>
</div>
<div class="col-sm-9">
<div class="style color">.col-sm-9</div>
</div>
</div>
</div>
</body>
</html>
Your design will look like this
The Bootstrap grid system provides easy way to create the layouts of the web pages. As opposed to the previous Bootstrap 2.x grid system which is fixed by default, the new version, i.e. Bootstrap 3 introduces the responsive mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.
Bootstrap 3 includes predefined grid classes for quickly design grid layouts for different types of devices like cell phones, tablets, laptops and desktops, etc. For example, you can use the
.col-xs-* class to create grid columns for extra small devices like cell phones, similarly the .col-sm-* class for small screen devices like tablets, the .col-md-* class for medium size devices like desktops and the .col-lg-* for large desktop screens.Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>C# jadu | Bootstrap Grid Syatem</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
/* Some custom styles to beautify this example */
.style{
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #ffd800;
margin-bottom: 10px;
}
.style.color{
background: #DB6B11;
}
</style>
</head>
<body>
<!-- Open the output in a new tab and resize the browser window to understand how the Bootstrap responsive grid system works. -->
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<br />
</div>
<div class="row">
<div class="col-sm-6">
<div class="style">.col-sm-6</div>
</div>
<div class="col-sm-6">
<div class="style color">.col-sm-6</div>
</div>
</div>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4">
<div class="style">.col-sm-4</div>
</div>
<div class="col-sm-8">
<div class="style color">.col-sm-8</div>
</div>
</div>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3">
<div class="style">.col-sm-3</div>
</div>
<div class="col-sm-9">
<div class="style color">.col-sm-9</div>
</div>
</div>
</div>
</body>
</html>
Your design will look like this
0 comments:
Post a Comment