Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Large Screens

This chapter will explain another feature supported by Bootstrap, the Extra Large Screen (Jumbotron). As the name implies, this component can increase the size of the title and add more margin (margin) to the login page content. The steps to use the Extra Large Screen (Jumbotron) are as follows:

Create a container with class .jumbotron. container <div>.
Except for the larger <h1>Font Weight font-weight is reduced to 200.

The following example demonstrates this:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap Example　-　Extra Large Screen (Jumbotron)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="jumbotron">
		<h1>Welcome to the login page! </h1>
		<p>This is an example of a large screen (Jumbotron).</p>
		<p><a　class="btn　btn-primary　btn-lg"　role="button">
			Learn more</a>
		</p>
	</div>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

To get an extra large screen that takes up the full width and has no rounded corners, please use all .container class outside of .jumbotron Classes, as shown in the following example:

Online Example

Example

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Example　-　Extra Large Screen (Jumbotron)</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron">
	<div class="container">
		<h1>Welcome to the login page! </h1>
		<p>This is an example of a large screen (Jumbotron).</p>
		<p><a　class="btn　btn-primary　btn-lg"　role="button">
			Learn more</a>
		</p>
	</div>
</div>
</body>
</html>

Test to see ‹/›

The results are as follows:

Bootstrap Page Title Bootstrap Badges