MDB React 5
Responsive React News Feed templates built with Bootstrap 5. News article feed, instagram, facebook and twitter-like feed, posts with comments, social section & more.
Check out React News Feed Documentation for detailed instructions & even more examples.
Basic example
import React from "react";
import {
MDBBtn,
MDBCol,
MDBContainer,
MDBRipple,
MDBRow,
} from "mdb-react-ui-kit";
export default function Basic() {
return (
<MDBContainer className="py-5">
<MDBRow className="gx-5">
<MDBCol md="6" className="mb-4">
<MDBRipple
className="bg-image hover-overlay ripple shadow-2-strong rounded-5"
rippleTag="div"
rippleColor="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/new/slides/080.webp"
className="w-100"
/>
<a href="#!">
<div
className="mask"
style={{ backgroundColor: "rgba(251, 251, 251, 0.15)" }}
></div>
</a>
</MDBRipple>
</MDBCol>
<MDBCol md="6" className="mb-4">
<span className="badge bg-danger px-2 py-1 shadow-1-strong mb-3">
News of the day
</span>
<h4>
<strong>Facilis consequatur eligendi</strong>
</h4>
<p className="text-muted">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
consequatur eligendi quisquam doloremque vero ex debitis veritatis
placeat unde animi laborum sapiente illo possimus, commodi
dignissimos obcaecati illum maiores corporis.
</p>
<MDBBtn>Read More</MDBBtn>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
How to use?
-
Download MDB 5 - FREE REACT UI KIT
-
Choose your favourite customized component and click on the image
-
Copy & paste the code into your MDB project
More examples (click on the image to see a live demo)
Blog posts:
News aggregator:
You can find other examples here.
More extended React documentation
- React Bootstrap Code
- React Bootstrap Gallery
- React Bootstrap Hamburger Menu
- React Bootstrap Jumbotron
- React Bootstrap Maps
- React Bootstrap Mega Menu
- React Bootstrap Media object
- React Bootstrap Multiselect
- React Bootstrap Masonry
- React Bootstrap Contact form
- React Bootstrap Gradients
- React Bootstrap Pagination
- React Bootstrap Panels
- React Bootstrap Social Media icons & buttons
- React Bootstrap Search
- React Bootstrap Table sort
- React Bootstrap Table responsive
- React Bootstrap Table scroll
- React Bootstrap Table search
- React Bootstrap Textarea
- React Bootstrap Sidebar
- React Bootstrap Profiles
- React Bootstrap Nested Dropdown
- React Bootstrap Address Form
- React Scroll Back to Top button
- React Product Cards
- React Avatar
- React Carousel Slider with Thumbnails
- React Chat
- React Comparison table
- React Comments
- React Drawer
- React FAQ component / section
- React Invoice