Gathering detailed insights and metrics for @mdbootstrap/react-quotes
Gathering detailed insights and metrics for @mdbootstrap/react-quotes
Installations
npm install @mdbootstrap/react-quotesDeveloper Guide
BETA
Typescript
No
Module System
N/A
Node Version
17.8.0
NPM Version
8.5.5
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.0
Package Id
@mdbootstrap/react-quotes@1.0.0
Unpacked Size
314.29 kB
Size
271.99 kB
File Count
25
NPM Version
8.5.5
Node Version
17.8.0
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Responsive React Quotes built with Bootstrap 5. HTML & CSS. Quote boxes with quote symbol, blockquotes, quote carousel slider, various quote styles with HTML & CSS.
Check out React Bootstrap Quotes Documentation for detailed instructions & even more examples.
Basic example
1import React from "react"; 2import { 3 MDBCard, 4 MDBCardBody, 5 MDBCol, 6 MDBContainer, 7 MDBRow, 8 MDBCarousel, 9 MDBCarouselInner, 10 MDBCarouselItem, 11 MDBTypography, 12 MDBIcon, 13} from "mdb-react-ui-kit"; 14 15export default function QuoteCarosuel() { 16 return ( 17 <section className="vh-100 gradient-custom"> 18 <MDBContainer className="py-5 h-100"> 19 <MDBRow className="justify-content-center align-items-center h-100"> 20 <MDBCol xl="10"> 21 <MDBCard> 22 <MDBCardBody className="py-5"> 23 <MDBCarousel showControls showIndicators dark> 24 <MDBCarouselInner> 25 <MDBCarouselItem className="active" tag="div"> 26 <MDBRow className="justify-content-center"> 27 <MDBCol md="8" lg="9" xl="8"> 28 <div className="d-flex"> 29 <div className="flex-shrink-0"> 30 <img 31 src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(1).webp" 32 className="rounded-circle mb-4 mb-lg-0 shadow-2" 33 alt="woman avatar" 34 width="90" 35 height="90" 36 /> 37 </div> 38 <div className="flex-grow-1 ms-4 ps-3"> 39 <figure> 40 <MDBTypography blockquote className="mb-4"> 41 <p> 42 <MDBIcon 43 fas 44 icon="quote-left fa-lg text-warning me-2" 45 /> 46 <span className="font-italic"> 47 Lorem ipsum dolor sit amet consectetur 48 adipisicing elit. Pariatur sint nesciunt 49 ad itaque aperiam expedita officiis 50 incidunt minus facere, molestias quisquam 51 impedit inventore. 52 </span> 53 </p> 54 </MDBTypography> 55 <figcaption className="blockquote-footer mb-0"> 56 Miranda Smith in{" "} 57 <cite title="Source Title">The Guardian</cite> 58 </figcaption> 59 </figure> 60 </div> 61 </div> 62 </MDBCol> 63 </MDBRow> 64 </MDBCarouselItem> 65 66 <MDBCarouselItem tag="div"> 67 <MDBRow className="justify-content-center"> 68 <MDBCol md="8" lg="9" xl="8"> 69 <div className="d-flex"> 70 <div className="flex-shrink-0"> 71 <img 72 src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(2).webp" 73 className="rounded-circle mb-4 mb-lg-0 shadow-2" 74 alt="woman avatar" 75 width="90" 76 height="90" 77 /> 78 </div> 79 <div className="flex-grow-1 ms-4 ps-3"> 80 <figure> 81 <MDBTypography blockquote className="mb-4"> 82 <p> 83 <MDBIcon 84 fas 85 icon="quote-left fa-lg text-warning me-2" 86 /> 87 <span className="font-italic"> 88 Sed ut perspiciatis unde omnis iste natus 89 error sit voluptatem accusantium 90 doloremque laudantium, totam rem aperiam, 91 eaque ipsa quae ab illo inventore 92 veritatis. 93 </span> 94 </p> 95 </MDBTypography> 96 <figcaption className="blockquote-footer mb-0"> 97 Annie Hall{" "} 98 <cite title="Source Title"> 99 New York Times 100 </cite> 101 </figcaption> 102 </figure> 103 </div> 104 </div> 105 </MDBCol> 106 </MDBRow> 107 </MDBCarouselItem> 108 109 <MDBCarouselItem tag="div"> 110 <MDBRow className="justify-content-center"> 111 <MDBCol md="8" lg="9" xl="8"> 112 <div className="d-flex"> 113 <div className="flex-shrink-0"> 114 <img 115 src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/img%20(9).webp" 116 className="rounded-circle mb-4 mb-lg-0 shadow-2" 117 alt="woman avatar" 118 width="90" 119 height="90" 120 /> 121 </div> 122 <div className="flex-grow-1 ms-4 ps-3"> 123 <figure> 124 <MDBTypography blockquote className="mb-4"> 125 <p> 126 <MDBIcon 127 fas 128 icon="quote-left fa-lg text-warning me-2" 129 /> 130 <span className="font-italic"> 131 At vero eos et accusamus et iusto odio 132 dignissimos qui blanditiis praesentium 133 voluptatum deleniti atque corrupti quos 134 dolores et quas molestias excepturi sint 135 amet dolore. 136 </span> 137 </p> 138 </MDBTypography> 139 <figcaption className="blockquote-footer mb-0"> 140 Jason More in{" "} 141 <cite title="Source Title"> 142 Smash Magazine 143 </cite> 144 </figcaption> 145 </figure> 146 </div> 147 </div> 148 </MDBCol> 149 </MDBRow> 150 </MDBCarouselItem> 151 </MDBCarouselInner> 152 </MDBCarousel> 153 </MDBCardBody> 154 </MDBCard> 155 </MDBCol> 156 </MDBRow> 157 </MDBContainer> 158 </section> 159 ); 160} 161
1.gradient-custom { 2 /* fallback for old browsers */ 3 background: #f6d365; 4 5 /* Chrome 10-25, Safari 5.1-6 */ 6 background: -webkit-linear-gradient(to right, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1)); 7 8 /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 9 background: linear-gradient(to right, rgba(246, 211, 101, 1), rgba(253, 160, 133, 1)) 10}
How to use?
-
Download MDB React - free UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project
▶️ Subscribe to YouTube channel for web development tutorials & resources
More examples
More extended Bootstrap documentation
No vulnerabilities found.
No security vulnerabilities found.