5+ Bootstrap Blockquote Examples

This post contains a total of 5+ Bootstrap Blockquote Examples with Source Code. All these Blockquote Examples are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Blockquote Examples

1. By Bruce Bentley

Made by Bruce Bentley. Simple Bootstrap Blockquote Style. Source

Bootstrap Blockquote by Bruce Bentley
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
  
<style>
@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700");
@import url("https://fonts.googleapis.com/css?family=Noto+Serif:400,400i,700,700i");
@import url("https://fonts.googleapis.com/css?family=Fira+Mono:400,500,700");
.blockquote {
  font-size: 1.25rem;
  border: 1px solid rgba(222, 226, 230, 0.54);
  border-left: 0.5rem solid rgba(0, 123, 255, 0.54);
  color: #6c757d;
  font-family: "Open Sans", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-style: italic;
  line-height: 1.6;
  margin: 1.875rem auto;
  max-width: 60%;
  padding: 4.6875rem 1.875rem 1.875rem 4.6875rem;
  position: relative;
  width: 100%;
}
.blockquote:before {
  font-size: 6.875rem;
  color: rgba(0, 123, 255, 0.54);
  content: "โ€œ";
  font-family: "Noto Serif", "Georgia", "Times New Roman", "Times", serif;
  font-size: 5.5rem;
  height: 3.75rem;
  left: 0.9375rem;
  line-height: 1;
  max-width: 3.75rem;
  position: absolute;
  text-align: inherit;
  top: 0.9375rem;
  width: 100%;
}
.blockquote:after {
  content: "";
}
.blockquote-footer {
  font-size: 80%;
  color: #343a40;
  display: block;
  font-style: normal;
  font-weight: 700;
  margin-top: 1rem;
  padding: 0;
}
.blockquote-footer:before {
  content: "โ€” ";
}
</style>
</head>
<body>
  <div class="container">
    <div class="row">
        <div class="col-sm-12">
           <!-- PAGE TITLE -->
            <h1 class="page__title my-3 text-center">
               Simple Blockquote Styles &mdash;
           </h1>

            <!-- BLOCKQUOTE -->
           <blockquote class="blockquote">
                <p class="mb-0">
                    Creativity is just connecting things.
                </p>
                <footer class="blockquote-footer">
                    Steve Jobs <cite title="Source Title">Source Title</cite>
                </footer>
            </blockquote>
        </div>
    </div>
</div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/js/all.js'></script>
</body>
</html>

2. By LASHirsh

Made by LASHirsh. Better bootstrap blockquote. Source

Bootstrap Blockquote by Lashirsh
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
blockquote {
    border-left:none
}

.quote-badge {
    background-color: #000000;
    background-color: rgba(0, 0, 0, 0.2);   
}

.quote-box {
    
    overflow: hidden;
    margin-top: 50px;
    padding-top: -25px;
    border-radius: 17px;
    background-color: #4ADFCC;
    color: white;
    width: 325px;
    box-shadow: 2px 2px 2px 2px #E0E0E0;
    
}

.quotation-mark {
    
    margin-top: 10px;
    font-weight: bold;
    font-size:100px;
    color: white;
    font-family: "Times New Roman", Times, Serif;
    
}

.quote-text {
    
    font-size: 19px;
    margin-top: -50px;
}

.blog-post-bottom pull-right {
  
}
</style>
</head>
<body>
  <div class="container">
    <blockquote class="quote-box">
      <p class="quotation-mark">
        โ€œ
      </p>
      <p class="quote-text">
        Don't believe anything that you read on the internet, it may be fake. 
      </p>
      <hr>
      <div class="blog-post-actions">
        <p class="blog-post-bottom pull-left">
          Abraham Lincoln
        </p>
        <p class="blog-post-bottom pull-right">
          <span class="badge quote-badge">743</span>  โค
        </p>
      </div>
    </blockquote>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
</body>
</html>

3. By Flora

Made by Flora. Simplistic Blockquote Design. Source

Bootstrap Blockquote by Flora
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
  font-family: "Noto Sans TC", sans-serif;
}

.blockquote-lin-reverse, .blockquote-lin {
  padding: 8px 16px;
  padding: 0.5rem 1rem;
}

.blockquote-lin {
  border-left: 5px solid #eee;
}

.blockquote-lin-reverse {
  text-align: right;
  border-right: 5px solid #eee;
}
</style>
</head>
<body>
  <div class="container py-5">
  <div class="row">
    <div class="col-md-6 mb-5">
      <blockquote class="blockquote blockquote-lin-reverse border-secondary">
        <p class="mb-0">Lorem Ipsum</p>
        <footer class="blockquote-footer">Lorem Ipsum<cite title="Source Title">Lorem Ipsum</cite></footer>
      </blockquote>
    </div>
    <div class="col-md-6 mb-5">
      <blockquote class="blockquote blockquote-lin border-success">
        <p class="mb-0">Lorem Ipsum</p>
        <footer class="blockquote-footer">Lorem Ipsum<cite title="Source Title">Lorem Ipsum</cite></footer>
      </blockquote>
    </div>
    <div class="col-md-6 mb-5">
      <blockquote class="blockquote blockquote-lin-reverse border-danger">
        <p class="mb-0">Lorem Ipsum</p>
        <footer class="blockquote-footer">Lorem Ipsum<cite title="Source Title">Lorem Ipsum</cite></footer>
      </blockquote>
    </div>
    <div class="col-md-6 mb-5">
      <blockquote class="blockquote blockquote-lin border-warning">
        <p class="mb-0">Lorem Ipsum</p>
        <footer class="blockquote-footer">Lorem Ipsum<cite title="Source Title">Lorem Ipsum</cite></footer>
      </blockquote>
    </div>
    <div class="col-md-6 mb-5">
      <blockquote class="blockquote blockquote-lin-reverse border-info">
        <p class="mb-0">Lorem Ipsum</p>
        <footer class="blockquote-footer">Lorem<cite title="Source Title">Lorem</cite></footer>
      </blockquote>
    </div>
  </div>
</div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js'></script>
</body>
</html>

4. By Derek

Made by Derek. Random Quote Machine with Bootstrap. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <script src="https://use.fontawesome.com/0e0cc9c300.js"></script>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'>
<style>
body {
  background-color: black;
}

#quote-box {
  background-color: white;
  padding: 30px;
}

#quote-box button {
  color: white;
  height: 50px;
  width: 50px;
}

.rounded-border {
  border-radius: 10px;
}

.vertical-center {
  min-height: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

#signature {
  color: white;
  text-align: center;
}
</style>
</head>
<body>
  <div>
  <div class="row vertical-center">
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
    <div id="quote-box" class="col-xs-6 col-sm-6 col-md-6 col-lg-6 row rounded-border">

      <!-- Quote -->
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <h2 id="quote-text" style="text-align:center">"Quotes go here"</h2></div>

      </div>
      <!-- Author -->
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <h4 id="quote-author" style="text-align:center">-Author</h4></div>
      </div>
      <!-- Row for buttons 
Use Font Awesome for social media icons -->
      <div class="row"></div>
      <!-- twitter icon -->
      <div id="twitter-icon" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 rounded-border"><i class="fa fa-twitter-square fa-5x" aria-hidden="true"><a></a></i></div>
      <!-- Spacer div -->
      <div class="col-xs-7 col-sm-7 col-md-7 col-lg-7"></div>
      <!--     refresh icon -->
      <div id="new-quote-icon" class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><i class="fa fa-refresh fa-5x" aria-hidden="true" style="float:right"></i></div>
    </div>
    <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
  </div>
  <!-- end of row containing entire quote-box-->
</div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
      <script>
var quoteArray = [
["Lorem Ipsum 1"],
["Lorem Ipsum 2"],
["Lorem Ipsum 3"],
["Lorem Ipsum 4"]];


var colorArray = [
"#FF99FF", // pinkish-purple
"#9999FF", // blue
"#00CC00", // green
"#FF6633", // orange
"#FFCC00", // yellow
"#999999" // gray
];

var numQuotes = quoteArray.length;
var numColors = colorArray.length;

var randomNum;

var randomColor;
var newRandomColor;

var randomColorNumber = 0;

// arrays each containing
// text at index 0
// and author at index 1
var quote;
var newQuote;

var twitterQuote = "";

$(document).ready(function () {
  // initialize quote to a random one
  randomNum = newRandomNumber();
  randomColor = newRandomColor();

  quote = newQuote(randomNum);
  twitterQuote = quote[0] + " " + quote[1];

  $("#quote-text").text(
  quote[0]);
  $("#quote-author").text(
  quote[1]);

  $("body").css("background-color", randomColor);
  $("#quote-text").css("color", randomColor);
  $("#quote-author").css("color", randomColor);
  $("#quote-box button").css("background-color", randomColor);
  $("i").css("color", randomColor);

  // whenever #new-quote-icon is clicked
  $("#new-quote-icon").on("click", function () {

    randomNum = newRandomNumber();
    randomColor = newRandomColor();

    quote = newQuote(randomNum);
    twitterQuote = quote[0] + " " + quote[1];

    $("#quote-text").text(
    quote[0]);
    $("#quote-author").text(
    quote[1]);

    $("body").css("background-color", randomColor);
    $("#quote-text").css("color", randomColor);
    $("#quote-author").css("color", randomColor);
    $("#quote-box button").css("background-color", randomColor);
    $("i").css("color", randomColor);

  }); // end of new quote function

  // when twitter icon is clicked
  $("#twitter-icon").on("click", function () {
    window.open("https://twitter.com/intent/tweet?text=" + twitterQuote);
  }); // end of twitter click function

}); // end of document ready function

// returns quote with index randomNum
function newQuote(randomNum) {
  return quoteArray[randomNum];
}

// returns number corresponding to
// quoteArray indices
function newRandomNumber() {
  var num = Math.floor(Math.random() * (numQuotes - 1));
  if (num >= randomNum) {
    num++;
  }
  return num;
}

// returns a new random color
// that is different than
// the current one
function newRandomColor() {
  var num = Math.floor(Math.random() * (numColors - 1));

  if (num >= randomColorNumber) {
    num++;
  }

  randomColorNumber = num;
  return colorArray[num];
}
    </script>
</body>
</html>

5. By cristina

Made by cristina. Bootstrap 4 Blockquote. Source

Bootstrap Blockquote by cristina
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.3.1/css/all.css'>
<style>
body {
  background-color: #fff;
  padding: 2rem 0rem;
}
</style>
</head>
<body>
  <div class="container">
      <blockquote class="blockquote text-center text-success">
        <p>It was a Roman who said it.</p>
        <footer class="blockquote-footer">Edith Hamilton, <cite title="The Greek Way">The Greek Way</cite></footer>
      </blockquote>
</div>
</body>
</html>

6. By nikhil

Made by nikhil. Bootstrap Testimonial Slider with Blockquote Testimonials. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>
  
<style>
#quote-carousel {
    padding: 0 10px 30px 10px;
    margin-top: 60px;
}
#quote-carousel .carousel-control {
    background: none;
    color: #CACACA;
    font-size: 2.3em;
    text-shadow: none;
    margin-top: 30px;
}
#quote-carousel .carousel-indicators {
    position: relative;
    right: 50%;
    top: auto;
    bottom: 0px;
    margin-top: 20px;
    margin-right: -19px;
}
#quote-carousel .carousel-indicators li {
    width: 50px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    opacity: 0.4;
    overflow: hidden;
    transition: all .4s ease-in;
    vertical-align: middle;
}
#quote-carousel .carousel-indicators .active {
    width: 128px;
    height: 128px;
    opacity: 1;
    transition: all .2s;
}
.item blockquote {
    border-left: none;
    margin: 0;
}
.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}
</style>
</head>
<body>
  <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="carousel slide" data-ride="carousel" id="quote-carousel">
                    <!-- Carousel Slides / Quotes -->
                    <div class="carousel-inner text-center">
                        <!-- Quote 1 -->
                        <div class="item active">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. !</p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 2 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                        <!-- Quote 3 -->
                        <div class="item">
                            <blockquote>
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. .</p>
                                        <small>Someone famous</small>
                                    </div>
                                </div>
                            </blockquote>
                        </div>
                    </div>
                    <!-- Bottom Carousel Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
                        </li>
                        <li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
                        </li>
                    </ol>

                    <!-- Carousel Buttons Next/Prev -->
                    <a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
                    <a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
                </div>
            </div>
        </div>
        <a class="btn btn-primary" href="http://thecodeblock.com/create-a-quote-testimonial-slider-using-bootstrap-carousel"><i class="fa fa-arrow-left"></i> Back to Article</a>
    </div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>
</body>
</html>