In this snippet we are giving you demo of bootstrap 4 animated blockquote box design. blockquote box with icon. when you hover on blockquote then icon was animated. css fancy blockquote. using this design you can display information in success,warning,danger. bootstrap blockquote not working then we are help you.

We allows to free snippets of bootstrap blockquote not working , you can download full code of Pure CSS Blockquote Styling layout. Here in this post i will give you example of bootstrap blockquote style snippet and you will get simple code of html, css and jquery. In big blockquote box design with icon snippet i give you three tab with html, css and js, you can easily get code of information in success,warning,danger layout.


<!DOCTYPE html> <html> <head> <title> Information Blockquote box design using Bootstrap 4.0 </title> <link rel="stylesheet" type="text/css" href="custom.css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> </head> <body> <div class="container main-section border p-5 bg-white"> <div class="row"> <div class="col-lg-12 header m-0 pb-4 text-secondary"> Information Blockquote box design using Bootstrap 4.0 </div> </div> <div class="row"> <div class="col-lg-6 box-sectiopn pb-4"> <div class="row m-0"> <div class="col-lg-3 text-center bg-success block text-white"> <i class="fa fa-thumbs-o-up" aria-hidden="true"></i> </div> <div class="col-lg-9 card-body border-right border border-success"> <h5 class="card-title text-secondary">Success</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> </div> </div> <div class="col-lg-6 box-sectiopn pb-4"> <div class="row m-0"> <div class="col-lg-3 text-center bg-warning block text-white"> <i class="fa fa-exclamation-circle" aria-hidden="true"></i> </div> <div class="col-lg-9 card-body border-right border border-warning"> <h5 class="card-title text-secondary">Warning</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> </div> </div> </div> <div class="row"> <div class="col-lg-6 box-sectiopn pb-4"> <div class="row m-0"> <div class="col-lg-3 text-center bg-danger block text-white"> <i class="fa fa-dot-circle-o" aria-hidden="true"></i> </div> <div class="col-lg-9 card-body border-right border border-danger"> <h5 class="card-title text-secondary">Danger</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> </div> </div> <div class="col-lg-6 box-sectiopn pb-4"> <div class="row m-0"> <div class="col-lg-3 text-center bg-info block text-white"> <i class="fa fa-info-circle" aria-hidden="true"></i> </div> <div class="col-lg-9 card-body border-right border border-info"> <h5 class="card-title text-secondary">Information</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> </div> </div> </div> <div class="col-lg-12 p-0 copany-title"> <p class="text-secondary">Create by : <span class="badge badge-dark p-2 ml-2"><a href="//nicesnippets.com" target="_blank" class="text-white">nicesnippets.com</a></span></p> </div> </div> </body> </html>
body{ background-color: #fafafa !important; } .main-section{ margin-top:100px; border:1px solid #d5d5d5; box-shadow: 1px 1px 15px #000; font-family: 'Roboto Condensed', sans-serif; } .header{ font-size:22px; } .box-sectiopn i{ font-size:40px; padding-top:35px; } .box-sectiopn{ cursor: pointer; } .box-sectiopn:hover i{ font-size: 60px; transition: 0.5s; }

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post


Random Blog