Bootstrap Tutorial - Bootstrap Text








Smaller Text

We can use the <small> tag or <span> tag with .small class to display the secondary text of any heading in a smaller and lighter variation.

<!-- w w w  .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;
    }
</style>
</head>
<body>
<div class="bs-example">
    <h1>h1. Bootstrap heading <small>Secondary text</small></h1>
    <h2>h2. Bootstrap heading <small>Secondary text</small></h2>
    <h3>h3. Bootstrap heading <small>Secondary text</small></h3>
    <h4>h4. Bootstrap heading <small>Secondary text</small></h4>
    <h5>h5. Bootstrap heading <small>Secondary text</small></h5>
    <h6>h6. Bootstrap heading <small>Secondary text</small></h6>
    <hr>
    <h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
    <h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
    <h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
    <h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
    <h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
    <h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>
</div>
</body>
</html>

Click to view the demo





Bold Text

We can use <strong> tag to emphasize a snippet of text with a heavier font-weight. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head>
<body style='margin: 20px;'>
  <strong>rendered as bold text</strong>
</body>
</html>

Click to view the demo





Italics Text

For emphasizing a snippet of text with italics we can use <em> to mark text. 

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

<em>rendered as italicized text</em>
        
</body>
</html>

Click to view the demo

small text style

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements. 

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

  <small>This line of text is meant to be treated as fine print.</small>
        
</body>
</html>

Click to view the demo

Text Formatting

We can use text formatting tags like <strong>, <i>, <small> to make text bold, italic, small and so on, in the same way you do in simple HTML.

<!--  w  w w  .jav a2s. 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><b>This is bold text</b></p>
    <p><big>This is big text</big></p>
    <p><code>This is computer code</code></p>
    <p><em>This is emphasized text</em></p>
    <p><i>This is italic text</i></p>
    <p><mark>This is highlighted text</mark></p>
    <p><small>This is small text</small></p>
    <p><strong>This is strongly emphasized text</strong></p>
    <p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
    <p><ins>This text is inserted to the document</ins></p>
    <p><del>This text is deleted from the document</del></p>
</div>
</body>
</html>

Click to view the demo

Text Transformation Classes

We can transform the text to lowercase, uppercase or make them capitalize.

<!--from  www . j  av  a  2 s.com-->
<!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 class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
    <p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
    <p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>
</div>
</body>
</html>

Click to view the demo

Text Emphasis Classes

Bootstrap has emphasis utility classes show success message in green color, warning or error message in red color, etc.

<!--from   w  ww.j  av a 2 s .  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">
    <p class="text-muted">Muted: This text is grayed out.</p>
    <p class="text-primary">Important: Please read the instructions carefully before proceed.</p>
    <p class="text-success">Success: Your message has been sent successfully.</p>
    <p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
    <p class="text-warning">Warning: There was a problem with your network connection.</p>
    <p class="text-danger">Error: An error has been occurred while submitting your data.</p>
</div>
</body>
</html>

Click to view the demo

Abbreviation Style

For expanded text on long hover of an abbreviation, include the title attribute with the <abbr> element. 

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

  <abbr title="attribute">attr</abbr>

</body>
</html>

Click to view the demo

Small Abbreviations

We can style abbreviation with smaller font by adding .initialism to an abbreviation for a slightly smaller font-size. 

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

  <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

</body>
</html>

Click to view the demo

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>. 

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

  <address>
    <strong>Monster, Inc.</strong><br> 999 Main Ave, Suite 600<br>
    San Diego, CA 99999<br> <abbr title="Phone">P:</abbr> (123)
    456-7890
  </address>

  <br />
  <br />
  <br />
  <br />
  <br />

  <address>
    <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a>
  </address>

</body>
</html>

Click to view the demo

Anchor

We can use btn class to make an anchor look like a button and add the .disabled class to <a> buttons to disable them. 

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
</head><!--from  www  .j  av  a 2s. c om-->
<body style='margin: 20px;'>

  <a href="#" class="btn btn-primary btn-lg disabled">Primary link</a>
  <a href="#" class="btn btn-default btn-lg disabled">Link</a>

</body>
</html>

Click to view the demo

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Code

Wrap inline snippets of code with <code>. 

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

  For example, <code>&lt;section&gt;</code> should be wrapped as inline.
        
</body>
</html>

Click to view the demo