Bootstrap Tutorial - Bootstrap Blockquote








For quoting blocks of content from another source within your document.

Wrap <blockquote> around any HTML as the quote.

<!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  o m-->
<body style='margin: 20px;'>

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer posuere erat a ante.</p>
  </blockquote>

</body>
</html>

Click to view the demo





Quotation Source Style

Style and content changes for simple variations on a standard <blockquote>. Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

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

  <blockquote>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer posuere erat a ante.</p>
    <small>Someone famous in <cite title="Source Title">Source
        Title</cite></small>
  </blockquote>

</body>
</html>

Click to view the demo





Right-aligned blockquote

Use .pull-right for a floated, right-aligned blockquote.

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

  <blockquote class="pull-right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Integer posuere erat a ante.</p>
    <small>Someone famous in <cite title="Source Title">Source
        Title</cite></small>
  </blockquote>

</body>
</html>

Click to view the demo