English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap4 Basic Tutorial

Bootstrap4 Utilities

Bootstrap4 provides some utilities that allow us to achieve the desired effects without writing CSS code.

Border

Using the border class can add or remove borders:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　<style>
　　.border {
　　　　display: inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>Border</h2>
　　<p>Using the border class can add or remove borders:/p>　
　　<span class="border"></span>
　　<span class="border border-0"></span>
　　<span class="border border-top-0"></span>
　　<span class="border border-right-0"></span>
　　<span class="border border-bottom-0"></span>
　　<span class="border border-left-0"></span>
</div>
</body>
</html>
Test and See ‹/›

Border color

Bootstrap4 provides some classes to set border color:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　.border {
　　　　display: inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>Border color</h2>
　　<p>Bootstrap4　provides some classes to set border color:/p>　
　　<span class="border border-primary"></span>
　　<span class="border border-secondary"></span>
　　<span class="border border-success"></span>
　　<span class="border border-danger"></span>
　　<span class="border border-warning"></span>
　　<span class="border border-info"></span>
　　<span class="border border-light"></span>
　　<span class="border border-dark"></span>
　　<span class="border border-white"></span>
</div>
</body>
</html>
Test and See ‹/›

Border rounding settings

Using the rounded class can add rounded corners:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　span {
　　　　display: inline-block;
　　　　width:　70px;
　　　　height:　70px;
　　　　margin:　6px;
　　　　background-color: #555;
　　}
　　</style>
</head>
<body>
<div　class="container">
　　<h2>Border rounding settings</h2>
　　<p>Using the rounded class can add rounded corners:/p>　
　　<span class="rounded"></span>
　　<span class="rounded-top"></span>
　　<span class="rounded-right"></span>
　　<span class="rounded-bottom"></span>
　　<span class="rounded-left"></span>
　　<span class="rounded-circle"></span>
　　<span class="rounded-0"></span>
</div>
</body>
</html>
Test and See ‹/›

float

.float-right class is used to set element float right, .float-left float element, .clearfix class is used to clear float:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>float</h2>
　　<p>.float-right class is used to set element float right, .float-left float element, .clearfix class is used to clear float:/p>　
　　<div class="clearfix">
　　　　<span class="float-left">float left</span>
　　　　<span class="float-right">float right</span>
　　</div>
</div>
</body>
</html>
Test and See ‹/›

Responsive float

We can set the float (.float-*-left|right - 　* The direction (sm, md, lg, or xl) depends on the screen size:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Responsive float/h2>
　　<p>Resize the browser to see the effect.</p>
　　<p>We can set the float (-*-left|right　-　*　The direction (sm, md, lg, or xl) depends on the screen size:/p>　
　　<div class="float-sm-right">Float to the right on screens larger than small/div><br>
　　<div class="float-md-right">Float to the right on screens larger than medium/div><br>
　　<div class="float-lg-right">Float to the right on screens larger than large/div><br>
　　<div class="float-xl-right">Float to the right on screens larger than extra large/div><br>
　　<div class="float-none">No float</div>
</div>
</body>
</html>
Test and See ‹/›

Centered alignment

Use .mx-auto class to set centered alignment:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Horizontal centering</h1>
　　<p>Use .mx-auto class to set centered alignment::</p>
　　<div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>
</body>
</html>
Test and See ‹/›

Width

element using w-* class (-25, .w-50, .w-75, .w-100, .mw-100) to set the width:<

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Width setting utility</h1>
　　<p>element using w-*　class (-25, .w-50, .w-75, .w-100, .mw-100) to set the width:</p>
　　<div class="w-25　bg-warning">Width　25%%</div>
　　<div class="w-50 bg-warning">Width　50%</div>
　　<div class="w-75　bg-warning">Width　75%%</div>
　　<div class="w-100 bg-warning">Width　100%</div>
　　<div class="mw-100 bg-warning">Maximum width　100%</div>
</div>
</body>
</html>
Test and See ‹/›

height

element using h-* class (-25, .h-50, .h-75, .h-100, .mh-100) to set the height:

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h1>Height Utility</h1>
　　<p>element using　h-*　class　(.h-25,　.h-5,　.h-75,　.h-100,　.mh-100)　to set the height:</p>
　　<div　style="height:200px;background-color:#ddd">
　　　　<div　class="h-25　d-inline-block　p-2　bg-warning">Height　25%%</div>
　　　　<div　class="h-50　d-inline-block　p-2　bg-warning">Height　50%</div>
　　　　<div　class="h-75　d-inline-block　p-2　bg-warning">Height　75%%</div>
　　　　<div　class="h-100　d-inline-block　p-2　bg-warning">Height　100%</div>
　　　　<div　class="mh-100　d-inline-block　p-2　bg-warning"　style="height:500px">Maximum Height　100%</div>
　　</div>
</div>
</body>
</html>
Test and See ‹/›
Bootstrap4 Flexbox LayoutBootstrap4 Scrollspy