How to build responsive web apps using React.

Today, I will share with you how I make the web apps I build using react.js (javascript library) responsive across multiple devices.

First of all, I use bootstrap v5 but that is not all, I have added some custom css styling that target the elements in my react web app that make my projects responsive across all platforms.

Here is my css styling, you should add this to your index.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 1rem;
}

body {
    min-height: 100vh;
}


.App {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
}

.section {
    background-color: whitesmoke;
    border: 1px solid blue;
    flex: 1;
}

with this few lines of code, I am able to write once, run anywhere and it will still be responsive.

bootstrap 5

I still use bootstrap grid system to make my project responsive.


 <section className="section">
        <div className="container">
            <div className="row">
             <div className="col-md-6">
                <div>
                   <p>I really like the female footballer sam kerr</p>
                </div>
             </div>
           </div>
        </div>
</section>