We can use the contextual background color classes to set the background-color of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{<!--from w w w .j a v a 2 s . c o m-->
margin: 20px;
}
p{
padding: 10px;
}
</style>
</head>
<body>
<div class="bs-example">
<p class="bg-primary">Important. This is important.</p>
<p class="bg-success">Success: This is successful.</p>
<p class="bg-info">Note: This is an information.</p>
<p class="bg-warning">Warning: This is a warning.</p>
<p class="bg-danger">Error: This is an error.</p>
</div>
</body>
</html>Bootstrap has a close icon for dismissing modals and alerts.
<!--from w w w.j av a2 s . co m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="alert alert-warning">
<a href="#" class="close" data-dismiss="alert">×</a>
<strong>Warning!</strong>.
</div>
</div>
</body>
</html>Bootstrap has a caret icon to indicate the dropdown.
The direction of the caret icon will reverse automatically in dropup menus.
<!--from www .j av a2s.c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Services <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
We can use the .center-block class to align the content block horizontally.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.wrapper{<!--from www .j a v a 2s. c om-->
margin: 20px;
padding: 10px;
background: #EEEEEE;
border: 1px solid #000;
}
.center-block{
width: 50%;
padding: 30px;
background: #e3b740;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="center-block">Center Aligned DIV Box</div>
<p><strong>Note:</strong>.</p>
</div>
</body>
</html>We can float an element to the left or right using the .pull-left and .pull-right classes.
<!-- ww w. j a v a 2 s.c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
.bs-example div{
margin: 20px;
padding: 20px;
background: #f0e68c;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="pull-left">Floated to left.</div>
<div class="pull-right">Floated to right.</div>
</div>
</body>
</html>The .clearfix class clears the float on any element.
<!--from www .ja va 2 s.co m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.wrapper{
margin: 20px;
padding: 10px;
background: #fffacd;
border: 1px solid #000;
}
.pull-left, .pull-right{
padding: 20px;
background: #e3b740;
}
</style>
</head>
<body>
<div class="wrapper clearfix">
<div class="pull-left">Float to left</div>
<div class="pull-right">Float to right</div>
</div>
</body>
</html>We can hide or show an element using the .show and .hidden classes.
We can use the class .invisible to toggle
only the visibility of an element and the element occupies the space in the layout.
<!-- www . j a v a2 s . c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
.bs-example div{
margin: 20px;
padding: 20px;
background: #f0e68c;
}
div.hint{
display: none;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="hint show">This is visible to the user.</div>
<div class="hidden">This is not visible to the user.</div>
<div class="invisible">This is not visible but affects the layout.</div>
<p>This is a normal paragraph.</p>
</div>
</body>
</html>The .sr-only class hides an element to all devices except screen readers.
<!--from w ww .j a v a 2 s . c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>This paragraph is visible to all devices.</p>
<p class="sr-only">This paragraph is only visible to screen readers.</p>
</div>
</body>
</html>We can use the class .text-hide to hide the text content of an element.
.text-hide uses the color: transparent and font-size: 0px
to hide the text.
Search engines consider such techniques as spam.
<h1 class="text-hide">The text of this heading is not visible</h1> <p class="text-hide">The text of this paragraph is not visible.</p>