Home Bootstrap 4 Reactjs Bootstrap 4 Colorful Accordion

Reactjs Bootstrap 4 Colorful Accordion

by therichpost
0 comment
Reactjs Bootstrap 4 Colorful Accordion

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Reactjs Bootstrap 4 Colorful Accordion.

Reactjs Bootstrap 4 Colorful Accordion
Reactjs Bootstrap 4 Colorful Accordion

For reactjs new comers, please check the below link:

Reactjs Basic Tutorials


Friends now I proceed onwards and here is the working code snippet for Reactjs Bootstrap 4 Colorful Accordion and please use this carefully to avoid the mistakes:

1. Firstly, we need fresh reactjs setup and for that, we need to run below commands into out terminal and also we should have latest node version installed on our system:

npx create-react-app reacttemplate

cd reacttemplate

npm start

 

2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:

npm install bootstrap --save

npm install jquery --save

npm start //For start project again

 

3. Finally for the main output, we need to add below code into our reacttemplate/src/App.js file or if you have fresh setup then you can replace reacttemplate/src/App.js file code with below code:

import React from 'react';
//import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

class Home extends React.Component {
    
 
  render() {
   
    return (
     
        <div className="maincontainer">
           <div class="container py-5">
   
   
  
    <div class="py-5">
      <div class="row">
  
        <div class="col-lg-6 mb-5">
         <a data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="true" aria-controls="collapseExample1" class="btn btn-primary btn-block py-2 shadow-sm with-chevron">
            <p class="d-flex align-items-center justify-content-between mb-0 px-3 py-2"><strong class="text-uppercase">Collapse Panel</strong><i class="fa fa-angle-down"></i></p>
          </a>
          <div id="collapseExample1" class="collapse shadow-sm show">
            <div class="card">
              <div class="card-body">
                <p class="font-italic mb-0 text-muted">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
              </div>
            </div>
          </div>
        </div>
  
        
  
      </div>
    </div>
  </div>
        </div>
     
      
)
};
}

export default Home;

 

4. Now friends, we need to below code into our reacttemplate/public/index.html file for some custom styling:

...
<head>
...
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    
    
    <style>
   /*
  *
  * ==========================================
  * CUSTOM UTIL CLASSES
  * ==========================================
  *
  */
  .with-chevron[aria-expanded='true'] i {
    display: block;
    transform: rotate(180deg) !important;
  }
  /*
  *
  * ==========================================
  * FOR DEMO PURPOSES
  * ==========================================
  *
  */
  body {
    min-height: 100vh;
    background-color: #fafafa;
  }
  /*
    </style>
  </head>

 

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks

You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.