Bootstrap Blockquote style

Style 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><!--   w ww  .  ja  v a 2s .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 . java 2s.  c o  m-->
<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><!-- w  w  w  .  j a va 2  s  . c  o  m-->
<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





















Home »
  Bootstrap »
    Bootstrap Tutorial »




Introduction
Basic HTML Style
List
Table
Form
Layout
Navigation Bar
Button
Control