Rate this docs

React Bootstrap Intro Sections

React Intro Sections - Bootstrap 4 & Material Design

React Bootstrap Intro Sections are full-page templates which can make Your website outstanding.


App intro MDB Pro component

Display of full page app intro page.

                import React from "react";
                import { BrowserRouter as Router } from "react-router-dom";
                import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask, MDBRow, MDBCol, MDBBtn,   MDBView, MDBContainer, MDBFormInline } from "mdbreact";
                import "./AppPage.css";

                class AppPage extends React.Component {
                  state = {
                    collapsed: false
                  };

                  handleTogglerClick = () => {
                    this.setState({
                      collapsed: !this.state.collapsed
                    });
                  };

                  render() {
                    const navStyle = { marginTop: "4rem" };
                    const overlay = (
                      <div
                        id="sidenav-overlay"
                        style={{ backgroundColor: "transparent" }}
                        onClick={this.handleTogglerClick}
                      />
                    );
                    return (
                      <div id="apppage">
                        <Router>
                          <div>
                            <MDBNavbar
                              color="primary-color"
                              style={navStyle}
                              dark
                              expand="md"
                              fixed="top"
                              scrolling
                              transparent
                            >
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <strong className="white-text">MDB</strong>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler onClick={this.handleTogglerClick} />
                                <MDBCollapse isOpen={this.state.collapsed} navbar>
                                  <MDBNavbarNav left>
                                    <MDBNavItem active>
                                      <MDBNavLink to="#!">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Link</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Profile</MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                  <MDBNavbarNav right>
                                    <MDBNavItem>
                                      <MDBFormInline waves>
                                        <div className="md-form my-0">
                                          <input
                                            className="form-control mr-sm-2"
                                            type="text"
                                            placeholder="Search"
                                            aria-label="Search"
                                          />
                                        </div>
                                      </MDBFormInline>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                </MDBCollapse>
                              </MDBContainer>
                            </MDBNavbar>
                            {this.state.collapsed && overlay}
                          </div>
                        </Router>
                        <MDBView>
                          <MDBMask className="d-flex justify-content-center align-items-center gradient">
                            <MDBContainer>
                              <MDBRow>
                                <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                                  <h1 className="h1-responsive font-weight-bold mt-sm-5">
                                    Make purchases with our app{" "}
                                  </h1>
                                  <hr className="hr-light" />
                                  <h6 className="mb-4">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Rem repellendus quasi fuga nesciunt dolorum nulla magnam
                                    veniam sapiente, fugiat! Commodi sequi non animi ea dolor
                                    molestiae iste.
                                  </h6>
                                  <MDBBtn color="white">Download</MDBBtn>
                                  <MDBBtn outline color="white">
                                    Learn More
                                  </MDBBtn>
                                </div>
                                <MDBCol md="6" xl="5" className="mt-xl-5">
                                  <img
                                    src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png"
                                    alt=""
                                    className="img-fluid"
                                  />
                                </MDBCol>
                              </MDBRow>
                            </MDBContainer>
                          </MDBMask>
                        </MDBView>

                        <MDBContainer>
                          <MDBRow className="py-5">
                            <MDBCol md="12" className="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                                sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBContainer>
                      </div>
                    );
                  }
                }

                export default AppPage;
            

                #apppage .gradient {
                  background: -moz-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
                  background: -webkit-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
                  background: -webkit-gradient(linear, 45deg, from(rgba(42, 27, 161, 0.7)), to(rgba(29, 210, 177, 0.7)));
                  background: -o-linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
                  background: linear-gradient(45deg, rgba(42, 27, 161, 0.7), rgba(29, 210, 177, 0.7) 100%);
                }

                #apppage .view {
                  background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.jpg');
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  height: 100vh;
                }

                #apppage h6 {
                  line-height: 1.7;
                }
            

Contact Form Intro MDB Pro component

Display of full page contact form intro

                import React from "react";
                import { BrowserRouter as Router } from "react-router-dom";
                import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask, MDBRow, MDBCol, MDBBtn,  MDBView, MDBContainer, MDBFormInline, MDBCard, MDBCardBody, MDBInput } from "mdbreact";
                import "./ContactFormPage.css";

                class ContactFormPage extends React.Component {
                  state = {
                    collapseID: ""
                  };

                  toggleCollapse = collapseID => () =>
                    this.setState(prevState => ({
                      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
                    }));

                  render() {
                    const navStyle = { marginTop: "4rem" };
                    const overlay = (
                      <div
                        id="sidenav-overlay"
                        style={{ backgroundColor: "transparent" }}
                        onClick={this.toggleCollapse("navbarCollapse")}
                      />
                    );
                    return (
                      <div id="contactformpage">
                        <Router>
                          <div>
                            <MDBNavbar
                              style={navStyle}
                              color="deep-purple darken-4"
                              dark
                              expand="md"
                              fixed="top"
                              scrolling
                              transparent
                            >
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <strong className="white-text">MDB</strong>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler
                                  onClick={this.toggleCollapse("navbarCollapse")}
                                />
                                <MDBCollapse
                                  id="navbarCollapse"
                                  isOpen={this.state.collapseID}
                                  navbar
                                >
                                  <MDBNavbarNav left>
                                    <MDBNavItem active>
                                      <MDBNavLink to="#!">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Link</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Profile</MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                  <MDBNavbarNav right>
                                    <MDBNavItem>
                                      <MDBFormInline waves>
                                        <div className="md-form my-0">
                                          <input
                                            className="form-control mr-sm-2"
                                            type="text"
                                            placeholder="Search"
                                            aria-label="Search"
                                          />
                                        </div>
                                      </MDBFormInline>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                </MDBCollapse>
                              </MDBContainer>
                            </MDBNavbar>
                            {this.state.collapseID && overlay}
                          </div>
                        </Router>

                        <MDBView>
                          <MDBMask
                            className="d-flex justify-content-center align-items-center"
                            overlay="indigo-strong"
                          >
                            <MDBContainer>
                              <MDBRow>
                                <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                                  <h1 className="display-4 font-weight-bold">Lorem ipsum </h1>
                                  <hr className="hr-light" />
                                  <h6 className="mb-4">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Rem repellendus quasi fuga nesciunt dolorum nulla magnam
                                    veniam sapiente, fugiat! Commodi sequi non animi ea dolor
                                    molestiae iste.
                                  </h6>
                                  <MDBBtn outline color="white">
                                    Learn More
                                  </MDBBtn>
                                </div>
                                <MDBCol md="6" xl="5" className="mb-4">
                                  <MDBCard className="dark-grey-text">
                                    <MDBCardBody className="z-depth-2">
                                      <h3 className="dark-grey-text text-center">
                                        <strong>Write to us:</strong>
                                      </h3>
                                      <hr />
                                      <MDBInput label="Your name" icon="user" />
                                      <MDBInput label="Your email" icon="envelope" />
                                      <MDBInput
                                        label="Your message"
                                        icon="pencil"
                                        type="textarea"
                                        rows="3"
                                      />
                                      <div className="text-center mt-3 black-text">
                                        <MDBBtn color="indigo">Send</MDBBtn>
                                        <hr />
                                        <MDBInput
                                          type="checkbox"
                                          id="checkbox"
                                          label="Subscribe me to the newsletter"
                                        />
                                      </div>
                                    </MDBCardBody>
                                  </MDBCard>
                                </MDBCol>
                              </MDBRow>
                            </MDBContainer>
                          </MDBMask>
                        </MDBView>

                        <MDBContainer>
                          <MDBRow className="py-5">
                            <MDBCol md="12" className="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                                sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBContainer>
                      </div>
                    );
                  }
                }

                export default ContactFormPage;
            

                #contactformpage .view {
                  background-image: url('https://mdbootstrap.com/img/Photos/Others/images/89.jpg');
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  height: 100vh;
                }

                #contactformpage h6 {
                  line-height: 1.7;
                }

                #contactformpage .form-check {
                  margin-bottom: 0!important;
                }

                #contactformpage i {
                  color: #9e9e9e!important;
                }
            

Classic Register Form intro MDB Pro component

Display of a page with a classic register form.

                import React from "react";
                import { BrowserRouter as Router } from "react-router-dom";
                import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask, MDBRow, MDBCol, MDBIcon,
                  MDBBtn, MDBView, MDBContainer, MDBCard, MDBCardBody, MDBInput, MDBFormInline } from "mdbreact";
                import "./ClassicFormPage.css";

                class ClassicFormPage extends React.Component {
                  state = {
                    collapseID: ""
                  };

                  toggleCollapse = collapseID => () =>
                    this.setState(prevState => ({
                      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
                    }));

                  render() {
                    const navStyle = { marginTop: "4rem" };
                    const overlay = (
                      <div
                        id="sidenav-overlay"
                        style={{ backgroundColor: "transparent" }}
                        onClick={this.toggleCollapse("navbarCollapse")}
                      />
                    );
                    return (
                      <div id="classicformpage">
                        <Router>
                          <div>
                            <MDBNavbar style={navStyle} dark expand="md" fixed="top">
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <strong className="white-text">MDB</strong>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler
                                  onClick={this.toggleCollapse("navbarCollapse")}
                                />
                                <MDBCollapse
                                  id="navbarCollapse"
                                  isOpen={this.state.collapseID}
                                  navbar
                                >
                                  <MDBNavbarNav left>
                                    <MDBNavItem active>
                                      <MDBNavLink to="#!">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Link</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Profile</MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                  <MDBNavbarNav right>
                                    <MDBNavItem>
                                      <MDBFormInline waves>
                                        <div className="md-form my-0">
                                          <input
                                            className="form-control mr-sm-2"
                                            type="text"
                                            placeholder="Search"
                                            aria-label="Search"
                                          />
                                        </div>
                                      </MDBFormInline>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                </MDBCollapse>
                              </MDBContainer>
                            </MDBNavbar>
                            {this.state.collapseID && overlay}
                          </div>
                        </Router>

                        <MDBView>
                          <MDBMask className="d-flex justify-content-center align-items-center gradient">
                            <MDBContainer>
                              <MDBRow>
                                <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                                  <h1 className="h1-responsive font-weight-bold">
                                    Sign up right now!{" "}
                                  </h1>
                                  <hr className="hr-light" />
                                  <h6 className="mb-4">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                                    Rem repellendus quasi fuga nesciunt dolorum nulla magnam
                                    veniam sapiente, fugiat! Commodi sequi non animi ea dolor
                                    molestiae, quisquam iste, maiores. Nulla.
                                  </h6>
                                  <MDBBtn outline color="white">
                                    Learn More
                                  </MDBBtn>
                                </div>
                                <MDBCol md="6" xl="5" className="mb-4">
                                  <MDBCard id="classic-card">
                                    <MDBCardBody className="z-depth-2 white-text">
                                      <h3 className="text-center">
                                        <MDBIcon icon="user" /> Register:
                                      </h3>
                                      <hr className="hr-light" />
                                      <MDBInput label="Your name" icon="user" />
                                      <MDBInput label="Your email" icon="envelope" />
                                      <MDBInput
                                        label="Your password"
                                        icon="lock"
                                        type="password"
                                      />
                                      <div className="text-center mt-4 black-text">
                                        <MDBBtn color="indigo">Sign Up</MDBBtn>
                                        <hr className="hr-light" />
                                        <div className="text-center d-flex justify-content-center white-label">
                                          <a href="#!" className="p-2 m-2">
                                            <MDBIcon icon="twitter" className="white-text" />
                                          </a>
                                          <a href="#!" className="p-2 m-2">
                                            <MDBIcon icon="linkedin" className="white-text" />
                                          </a>
                                          <a href="#!" className="p-2 m-2">
                                            <MDBIcon icon="instagram" className="white-text" />
                                          </a>
                                        </div>
                                      </div>
                                    </MDBCardBody>
                                  </MDBCard>
                                </MDBCol>
                              </MDBRow>
                            </MDBContainer>
                          </MDBMask>
                        </MDBView>

                        <MDBContainer>
                          <MDBRow className="py-5">
                            <MDBCol md="12" className="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                                sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBContainer>
                      </div>
                    );
                  }
                }

                export default ClassicFormPage;
            

                #classicformpage .view {
                  background-image: url('https://mdbootstrap.com/img/Photos/Others/images/91.jpg');
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  height: 100vh;
                }

                #classicformpage .gradient {
                  background: -webkit-linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
                  background: -webkit-gradient(linear, 45deg, from(rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%));
                  background: linear-gradient(45deg, rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%);
                }

                #classicformpage .card {
                  background-color: rgba(126, 123, 215, 0.2);
                }

                #classicformpage h6 {
                  line-height: 1.7;
                }

                #classicformpage .navbar {
                  transition: background .5s ease-in-out,padding .5s ease-in-out;
                }

                #classicformpage .top-nav-collapse {
                  background: #424f95 !important;
                }

                @media (max-width: 768px) {
                  #classicformpage .navbar:not(.top-nav-collapse) {
                      background: #424f95 !important;
                  }
                }

                #classicformpage label {
                  color: #fff!important;
                }

            

Video background intro MDB Pro component

Display of intro page with video

                import React from "react";
                import { BrowserRouter as Router } from "react-router-dom";
                import { MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBMask, MDBRow, MDBCol, MDBIcon,   MDBBtn, MDBView, MDBContainer } from "mdbreact";
                import "./VideoBackgroundPage.css";

                class VideoBackgroundPage extends React.Component {
                  state = {
                    collapseID: ""
                  };

                  toggleCollapse = collapseID => () =>
                    this.setState(prevState => ({
                      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
                    }));

                  render() {
                    const navStyle = { marginTop: "4rem" };
                    const overlay = (
                      <div
                        id="sidenav-overlay"
                        style={{ backgroundColor: "transparent" }}
                        onClick={this.toggleCollapse("navbarCollapse")}
                      />
                    );
                    return (
                      <div id="videobackground">
                        <Router>
                          <div>
                            <MDBNavbar style={navStyle} dark expand="md" fixed="top">
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <span className="white-text">MDBNavbar</span>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler
                                  onClick={this.toggleCollapse("navbarCollapse")}
                                />
                                <MDBCollapse
                                  id="navbarCollapse"
                                  isOpen={this.state.collapseID}
                                  navbar
                                >
                                  <MDBNavbarNav left>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">About</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Features</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Services</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Opinions</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Team</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Contact</MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                  <MDBNavbarNav right>
                                    <MDBNavItem>
                                      <MDBNavLink to="!#">
                                        <MDBIcon icon="facebook" />
                                      </MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="!#">
                                        <MDBIcon icon="twitter" />
                                      </MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="!#">
                                        <MDBIcon icon="instagram" />
                                      </MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                </MDBCollapse>
                              </MDBContainer>
                            </MDBNavbar>
                            {this.state.collapseID && overlay}
                          </div>
                        </Router>

                        <MDBView>
                          <video
                            className="video-intro"
                            poster="https://mdbootstrap.com/img/Photos/Others/background.jpg"
                            playsInline
                            autoPlay
                            muted=""
                            loop
                          >
                            <source
                              src="https://mdbootstrap.com/img/video/animation.mp4"
                              type="video/mp4"
                            />
                          </video>
                          <MDBMask className="d-flex justify-content-center align-items-center gradient">
                            <MDBContainer className="px-md-3 px-sm-0">
                              <MDBRow>
                                <MDBCol md="12" className="mb-4 white-text text-center">
                                  <h3 className="display-3 font-weight-bold mb-0 pt-md-5">
                                    Creative Agency{" "}
                                  </h3>
                                  <hr className="hr-light my-4 w-75" />
                                  <h4 className="subtext-header mt-2 mb-4">
                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
                                    deleniti consequuntur nihil.
                                  </h4>
                                  <MDBBtn outline rounded color="white">
                                    <MDBIcon icon="home" /> Visit us
                                  </MDBBtn>
                                </MDBCol>
                              </MDBRow>
                            </MDBContainer>
                          </MDBMask>
                        </MDBView>

                        <MDBContainer>
                          <MDBRow className="pt-5 pb-4">
                            <MDBCol md="12" className="text-center">
                              <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                                sunt in culpa qui officia deserunt mollit anim id est laborum.
                              </p>
                            </MDBCol>
                          </MDBRow>
                        </MDBContainer>
                      </div>
                    );
                  }
                }

                export default VideoBackgroundPage;
            

                #videobackground .gradient {
                  background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                  background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                  background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                }

              #videobackground .view video {
                top: 0!important;
                left: 0!important;
                transform: none!important;
                height: 100vh;
              }