In this post, we are learning about Bootstrap Nested Column.
In previous post I wrote about what is Bootstrap?,How to setup Bootstrap?,Bootstrap Grid System and Bootstrap Container Class.
In Bootstrap, it is possible to define columns in columns.
We can divide the column into smaller columns by defining the class row in the column.
To do this, we need to declare a new row in the column markup and then create a column in it.
Let's write a code to test nested columns:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Tutorial</title>
<!-- CSS -->
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Add Custom CSS below -->
</head>
<body>
<div class="container" style="background: cyan">
<div class="row">
<div class="col-xs-12 col-sm-6" style="background: green">
<h1>Hello</h1>
<div class="row">
<div class="col-xs-6 col-sm-6" style="background: orange">
<h2>Welcome</h2>
</div>
<div class="col-xs-6 col-sm-6" style="background: grey">
<h2>BOOTSTRAP</h2>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6" style="background: pink">
<h1>World</h1>
</div>
</div>
</div>
</body>
</html>
Here is the output of the above code:
Output
In the above output, we can clearly see that we have created two different
columns within the first column. Since the second column does not have any nested
columns in it, the background color (cyan) of the main container is now visible to us. This
way we can create as many nesting columns as we want.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.