Rate this docs

React Bootstrap Features

React Features Sections - Bootstrap 4 & Material Design

React Bootstrap Features Sections help you to highlight the best features of your project.


Features v.1 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Analytics

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Tutorials

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


                import React from "react";
                import {  MDBRow, MDBCol, MDBIcon } from "mdbreact";

                const FeaturesPage = () => {
                  return (
                      <section className="text-center my-5">
                        <h2 className="h1-responsive font-weight-bold my-5">
                          Why is it so great?
                        </h2>
                        <p className="lead grey-text w-responsive mx-auto mb-5">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                          ad minim veniam.
                        </p>
                        <MDBRow>
                          <MDBCol md="4">
                            <MDBIcon icon="area-chart" size="3x" className="red-text" />
                            <h5 className="font-weight-bold my-4">Analytics</h5>
                            <p className="grey-text mb-md-0 mb-5">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Reprehenderit maiores aperiam minima assumenda deleniti hic.
                            </p>
                          </MDBCol>
                          <MDBCol md="4">
                            <MDBIcon icon="book" size="3x" className="cyan-text" />
                            <h5 className="font-weight-bold my-4">Tutorials</h5>
                            <p className="grey-text mb-md-0 mb-5">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Reprehenderit maiores aperiam minima assumenda deleniti hic.
                            </p>
                          </MDBCol>
                          <MDBCol md="4">
                            <MDBIcon icon="comments-o" size="3x" className="orange-text" />
                            <h5 className="font-weight-bold my-4">Support</h5>
                            <p className="grey-text mb-md-0 mb-5">
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Reprehenderit maiores aperiam minima assumenda deleniti hic.
                            </p>
                          </MDBCol>
                        </MDBRow>
                      </section>
                  );
                }

                export default FeaturesPage;
            

Features v.2 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Marketing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

Customization

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

Support

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda.

Learn more

                import React from "react";
                import {  MDBRow, MDBCol, MDBIcon, MDBBtn } from "mdbreact";

                const FeaturesPage = () => {
                  return (
                    <section className="my-5">
                      <h2 className="h1-responsive font-weight-bold text-center my-5">
                        Why is it so great?
                      </h2>
                      <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                        ad minim veniam.
                      </p>

                      <MDBRow>
                        <MDBCol md="4" className="md-0 mb-5">
                          <MDBRow>
                            <MDBCol lg="2" md="3" size="2">
                              <MDBIcon icon="bullhorn" size="2x" className="blue-text" />
                            </MDBCol>
                            <MDBCol lg="10" md="9" size="10">
                              <h4 className="font-weight-bold">Marketing</h4>
                              <p className="grey-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                do eiusmod tempor incididunt ut labore et dolore magna
                                aliqua. Ut enim ad minim veniam.
                              </p>
                              <MDBBtn color="primary" size="sm">
                                Learn more
                              </MDBBtn>
                            </MDBCol>
                          </MDBRow>
                        </MDBCol>
                        <MDBCol md="4" className="md-0 mb-5">
                          <MDBRow>
                            <MDBCol lg="2" md="3" size="2">
                              <MDBIcon icon="cogs" size="2x" className="pink-text" />
                            </MDBCol>
                            <MDBCol lg="10" md="9" size="10">
                              <h4 className="font-weight-bold">Customization</h4>
                              <p className="grey-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                do eiusmod tempor incididunt ut labore et dolore magna
                                aliqua. Ut enim ad minim veniam.
                              </p>
                              <MDBBtn color="pink" size="sm">
                                Learn more
                              </MDBBtn>
                            </MDBCol>
                          </MDBRow>
                        </MDBCol>
                        <MDBCol md="4" className="md-0 mb-5">
                          <MDBRow>
                            <MDBCol lg="2" md="3" size="2">
                              <MDBIcon icon="dashboard" size="2x" className="purple-text" />
                            </MDBCol>
                            <MDBCol lg="10" md="9" size="10">
                              <h4 className="font-weight-bold">Support</h4>
                              <p className="grey-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                                do eiusmod tempor incididunt ut labore et dolore magna
                                aliqua. Ut enim ad minim veniam.
                              </p>
                              <MDBBtn color="purple" size="sm">
                                Learn more
                              </MDBBtn>
                            </MDBCol>
                          </MDBRow>
                        </MDBCol>
                      </MDBRow>
                    </section>
                  );
                }

                export default FeaturesPage;
            

Features v.3 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Safety

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Technology

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Finance

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


                import React from "react";
                import {  MDBRow, MDBCol, MDBIcon } from "mdbreact";

                const FeaturesPage = () => {
                  return (
                    <section className="my-5">
                        <h2 className="h1-responsive font-weight-bold text-center my-5">
                          Why is it so great?
                        </h2>
                        <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                          ad minim veniam.
                        </p>

                        <MDBRow>
                          <MDBCol lg="5" className="text-center text-lg-left">
                            <img
                              className="img-fluid"
                              src="https://mdbootstrap.com/img/Photos/Others/screens-section.jpg"
                              alt=""
                            />
                          </MDBCol>
                          <MDBCol lg="7">
                            <MDBRow className="mb-3">
                              <MDBCol size="1">
                                <MDBIcon icon="mail-forward" size="lg" className="indigo-text" />
                              </MDBCol>
                              <MDBCol xl="10" md="11" size="10">
                                <h5 className="font-weight-bold mb-3">Safety</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                  enim ad minima veniam, quis nostrum exercitationem ullam.
                                  Reprehenderit maiores aperiam assumenda deleniti hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                            <MDBRow className="mb-3">
                              <MDBCol size="1">
                                <MDBIcon icon="mail-forward" size="lg" className="indigo-text" />
                              </MDBCol>
                              <MDBCol xl="10" md="11" size="10">
                                <h5 className="font-weight-bold mb-3">Technology</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                  enim ad minima veniam, quis nostrum exercitationem ullam.
                                  Reprehenderit maiores aperiam assumenda deleniti hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                            <MDBRow className="mb-3">
                              <MDBCol size="1">
                                <MDBIcon icon="mail-forward" size="lg" className="indigo-text" />
                              </MDBCol>
                              <MDBCol xl="10" md="11" size="10">
                                <h5 className="font-weight-bold mb-3">Finance</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                  enim ad minima veniam, quis nostrum exercitationem ullam.
                                  Reprehenderit maiores aperiam assumenda deleniti hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                          </MDBCol>
                        </MDBRow>
                      </section>
                  );
                }

                export default FeaturesPage;
            

Features v.4 MDB Pro component

Why is it so great?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

International

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Experimental

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Relaxing

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Beloved

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Rapid

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.

Magical

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minima assumenda deleniti hic.


                import React from "react";
                import {  MDBRow, MDBCol, MDBIcon } from "mdbreact";

                const FeaturesPage = () => {
                  return (
                    <section className="my-5">
                        <h2 className="h1-responsive font-weight-bold text-center my-5">
                          Why is it so great?
                        </h2>
                        <p className="lead grey-text w-responsive text-center mx-auto mb-5">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
                          ad minim veniam.
                        </p>

                        <MDBRow>
                          <MDBCol md="4">
                            <MDBRow className="mb-3">
                              <MDBCol size="2">
                                <MDBIcon
                                  icon="flag-checkered"
                                  size="2x"
                                  className="deep-purple-text"
                                />
                              </MDBCol>
                              <MDBCol size="10">
                                <h5 className="font-weight-bold mb-3">International</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                  Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                  hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                            <MDBRow className="mb-3">
                              <MDBCol size="2">
                                <MDBIcon icon="flask" size="2x" className="deep-purple-text" />
                              </MDBCol>
                              <MDBCol size="10">
                                <h5 className="font-weight-bold mb-3">Experimental</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                  Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                  hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                            <MDBRow className="mb-3">
                              <MDBCol size="2">
                                <MDBIcon icon="glass" size="2x" className="deep-purple-text" />
                              </MDBCol>
                              <MDBCol size="10">
                                <h5 className="font-weight-bold mb-3">Relaxing</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                  Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                  hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                          </MDBCol>
                          <MDBCol md="4" className="text-name">
                            <img
                              className="img-fluid"
                              src="https://mdbootstrap.com/img/Mockups/Transparent/Small/iphone-portfolio1.png"
                              alt=""
                            />
                          </MDBCol>
                          <MDBCol md="4">
                            <MDBRow className="mb-3">
                              <MDBCol size="2">
                                <MDBIcon icon="heart" size="2x" className="deep-purple-text" />
                              </MDBCol>
                              <MDBCol size="10">
                                <h5 className="font-weight-bold mb-3">Beloved</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                  Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                  hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                            <MDBRow className="mb-3">
                              <MDBCol size="2">
                                <MDBIcon icon="flash" size="2x" className="deep-purple-text" />
                              </MDBCol>
                              <MDBCol size="10">
                                <h5 className="font-weight-bold mb-3">Rapid</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                  Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                  hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                            <MDBRow className="mb-3">
                              <MDBCol size="2">
                                <MDBIcon icon="magic" size="2x" className="deep-purple-text" />
                              </MDBCol>
                              <MDBCol size="10">
                                <h5 className="font-weight-bold mb-3">Magical</h5>
                                <p className="grey-text">
                                  Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                  Reprehenderit maiores nam, aperiam minima assumenda deleniti
                                  hic.
                                </p>
                              </MDBCol>
                            </MDBRow>
                          </MDBCol>
                        </MDBRow>
                      </section>
                  );
                }

                export default FeaturesPage;