In this post, we are learning about
Bootstrap container Class.To fill any
content inside the webpage, we need to create a
container. This will be used to
wrap all the webpage content and center it to the browser screen. Let’s define a
container inside
index.html and move the Hello World message inside it.
<!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">
<h1>Hello World</h1>
</div>
</body>
</html>
Here is the output of the above code:
Output
We can easily see that it has moved the message towards the Center. It will be more clearly
understand if we apply a background color to the
container. So, let’s apply an
inline CSS to the container markup.
<!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: #dccccc" >
<h1>Hello World</h1>
</div>
</body>
</html>
Let’s see the below output:
Output
If we want to use
Bootstrap’s Grid System then we should always define a
container.
After this we need to define
row. To define a
row, we need to use a class called
row.
Let’s see how to create a
row inside the
container.
<div class="container">
<div class="row" >
</div>
</div>
The creating a
row is that we want to use
Bootstrap Grid System.By This we can create a vertical column
inside the
row. A Single column in
Bootstrap will occupy all the of that row. The creating 2 column will
divide the row into 2 equal part.So, we can create a more columns and row space will be equally divided.
The
Bootstrap grid system have 12 columns. If we create more than 12 columns,the remaining columns will
be moved automatically to a new row. So, let's create a single column.
<!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">
<div class="row" >
<div class="col-xs-12" style="background: #dccccc">
<h1>Hello World</h1>
</div>
</div>
</div>
</body>
</html>
Let’s see the below output:
Output
If we want to create a single column then we need it to span across 12
Bootstrap columns, So,
we use the class
"col-md-12". If we want to create two columns then we need to use the class
"col-md-6".
This will create each column span across 6
Bootstrap column. So, let’s proceed and create 2 columns
in the previous markup code.
<!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">
<div class="row" >
<div class="col-xs-6" style="background: #a5cca5">
<h1>Hello</h1>
</div>
<div class="col-xs-6" style="background: #b78d8d">
<h1>World</h1>
</div>
</div>
</div>
</body>
</html>
Here is the output of the above code.
Output
The
Bootstrap has already defined
classes for different sizes devices. Using
Bootstrap
we can also dynamically change the number of columns in different devices. For example, with
the help of the classes
"col-xs-4" and
"col-sm-6" together will make a
column span across four
Bootstrap columns in
extra-small devices, and six
Bootstrap
columns in small devices. The steps are as follows:
<!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">
<div class="row" >
<div class="col-xs-12 col-sm-6" style="background: #a5cca5">
<h1>Hello</h1>
</div>
<div class="col-xs-12 col-sm-6" style="background: #b78d8d">
<h1>World</h1>
</div>
</div>
</div>
</body>
</html>
Let’s see the below output:
Output
The above screenshot shows the webpage in extra-small devices. The browser renders
one column per row because of the class
"col-xs-12".Hopefully, now we have got an idea of how
Bootstrap’s columns are named.
No comments:
Post a Comment
Please do not enter any spam link in the comment box.