Bootstrap Tutorial - Bootstrap Paragraph








Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of half their computed line-height (10px by default).

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--   www .  ja  v a2s.c  om-->
<body style='margin:20px;'>

  <p>This is a paragraph.</p>
        
</body>
</html>

Click to view the demo





Leading Paragraph

Make a paragraph stand out by adding .lead.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--   w ww  . j  ava 2 s  .c o  m-->
<body style='margin:20px;'>
  
  <p class="lead">This is a test.</p>
        
</body>
</html>

Click to view the demo





Paragraph Alignment

We can control the text alignment of a paragraph with the following three classes.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from   w  ww. j a v a2 s.  com-->
<body style='margin:20px;'>

    <p class="text-left">Left aligned text.</p>
    <p class="text-center">Center aligned text.</p>
    <p class="text-right">Right aligned text.</p>
        
</body>
</html>

Click to view the demo

Meaningful Paragraph

Convey meaning through color with a handful of emphasis utility classes.

<!DOCTYPE HTML>
<html> 
<head> 
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!-- ww  w  . java2  s .  c o m-->
<body style='margin:20px;'>

    <p class="text-muted">text-muted</p>
    <p class="text-primary">text-primary</p>
    <p class="text-warning">text-warning</p>
    <p class="text-danger">text-danger</p>
    <p class="text-success">text-success</p>
    <p class="text-info">text-info</p>
        
</body>
</html>

Click to view the demo