Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@marveluck
marveluck committed Jan 27, 2022
1 parent c3597f7 commit 523193e
Showing 1 changed file with 97 additions and 7 deletions.
104 changes: 97 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
# Bootstrap Quotes

Responsive Quotes built with the latest Bootstrap 5, HTML & CSS. Various variations of block quotes and quote boxes. Different styles, colors and functionalities.

Check out [Bootstrap Quotes Documentation](https://mdbootstrap.com/docs/standard/extended/quotes/) for detailed instructions & even more examples.

## Basic example

HTML
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/basic.png)

```html
<section class="vh-100 gradient-custom">
Expand Down Expand Up @@ -32,7 +33,7 @@ HTML
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(1).jpg" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90">
</div>
<div class="flex-grow-1 ms-4 ps-3">
Expand All @@ -59,7 +60,7 @@ HTML
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(2).jpg" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90">
</div>
<div class="flex-grow-1 ms-4 ps-3">
Expand All @@ -86,7 +87,7 @@ HTML
<div class="col-md-8 col-lg-9 col-xl-8">
<div class="d-flex">
<div class="flex-shrink-0">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(9).jpg" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
<img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" class="rounded-circle mb-4 mb-lg-0 shadow-2" alt="woman avatar" width="90"
height="90">
</div>
<div class="flex-grow-1 ms-4 ps-3">
Expand Down Expand Up @@ -131,7 +132,6 @@ HTML
</section>
```

CSS
```css
.gradient-custom {
/* fallback for old browsers */
Expand All @@ -145,4 +145,94 @@ CSS
}
```

#### Much more examples and a detailed description can be found at [📄 Quotes documentation page](https://mdbootstrap.com/docs/standard/extended/quotes/)
## How to use?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized component and click on the image

3. Copy & paste the code into your MDB project

[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)

## More examples

[Bootstrap Quotes #2:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-2.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-2)

[Bootstrap Quotes #3:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-3.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-3)

[Bootstrap Quotes #4:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-4.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-4)

[Bootstrap Quotes #5:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-5.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-5)

[Bootstrap Quotes #6:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-6.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-6)

[Bootstrap Quotes #7:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-7.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-7)

[Bootstrap Quotes #8:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-8.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-8)

[Bootstrap Quotes #9:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-9.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-9)

[Bootstrap Quotes #10:
![Bootstrap 5 Quotes](https://mdbootstrap.com/img/Marketing/github/quotes/section-10.png)](https://mdbootstrap.com/docs/standard/extended/quotes/#section-10)


___

## More extended Bootstrap documentation

<ul>
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-address-form/">Bootstrap Address Form</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/avatar/">Bootstrap Avatar</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/back-to-top/">Bootstrap Back To Top Button</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/carousel-with-thumbnails/">Bootstrap Carousel Slider with Thumbnails</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/chat/">Bootstrap Chat</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/code/">Bootstrap Code Blocks</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/comments/">Bootstrap Comments</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-comparison-table/">Bootstrap Comparison Table</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/credit-card/">Bootstrap Credit Card Form</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/drawer/">Bootstrap Drawer</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/dropdown-multilevel/">Bootstrap Nested Dropdown</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/faq/">Bootstrap FAQ component / section</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/gallery/">Bootstrap Gallery</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/hamburger-menu/">Bootstrap Hamburger Menu</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-invoice/">Bootstrap Invoice</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/jumbotron/">Bootstrap Jumbotron</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/login/">Bootstrap Login Form</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/maps/">Bootstrap Maps</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/media-object/">Bootstrap Media Object</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/mega-menu/">Bootstrap Mega Menu</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/multiselect/">Bootstrap Multiselect</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/news-feed/">Bootstrap News Feed</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/offcanvas/">Bootstrap Offcanvas</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/order-details/">Bootstrap Order Details</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/page-transitions/">Bootstrap Page Transitions</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/payment-forms/">Bootstrap Payment Forms</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/product-cards/">Bootstrap Product Cards</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/profiles/">Bootstrap Profiles</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/quotes/">Bootstrap Quotes</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/registration/">Bootstrap Registration Form</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/search-expanding/">Bootstrap Expanding Search Bar</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/shopping-carts/">Bootstrap Shopping Carts</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/side-navbar/">Bootstrap Side Navbar</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/sidebar/">Bootstrap Sidebar</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/social-media/">Bootstrap Social Media Icons & Buttons</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/square-buttons/">Bootstrap Square Buttons</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/bootstrap-survey-form/">Bootstrap Survey Form</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/testimonial-slider/">Bootstrap Testimonial Slider</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/testimonials/">Bootstrap Testimonials</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/textarea/">Bootstrap Textarea</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/timeline/">Bootstrap Timeline</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/to-do-list/">Bootstrap To Do List</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/video-carousel/">Bootstrap Video Carousel / Gallery</a></li>
<li><a href="https://mdbootstrap.com/docs/standard/extended/weather/">Bootstrap Weather</a></li>
</ul>

0 comments on commit 523193e

Please sign in to comment.