Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website. Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan. (Wikipedia).
Kali ini saya akan membagikan cara Membuat Desain Blockquote dengan Bootsrap. berikut ini adalah tampilan Blockquote dengan Bootsrap :
 |
| Bootsrap HTML / CSS |
Kode HTML
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Masukkan tag kamu ---------->
<div class="container">
<blockquote class="quote-box">
<p class="quotation-mark">
“
</p>
<p class="quote-text">
Untuk jadi maju memang banyak tantangan dan hambatan. Kecewa semenit dua menit boleh, tetapi setelah itu harus bangkit lagi
</p>
<hr>
<div class="blog-post-actions">
<p class="blog-post-bottom pull-left">
Joko Widodo
</p>
<p class="blog-post-bottom pull-right">
<span class="badge quote-badge">Presiden RI</span> ❤
</p>
</div>
</blockquote>
</div>
Kode CSS
blockquote{
border-left:none
}
.quote-badge{
background-color: rgba(0, 0, 0, 0.2);
}
.quote-box{
overflow: hidden;
margin-top: -50px;
padding-top: -100px;
border-radius: 17px;
background-color: #4ADFCC;
margin-top: 25px;
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", Georgia, Serif;
}
.quote-text{
font-size: 19px;
margin-top: -65px;
}
