DEV Community

Cover image for How to build responsive web apps using React.
Ifeanyi Chima
Ifeanyi Chima

Posted on • Updated on

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.

BMC

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;
}

Enter fullscreen mode Exit fullscreen mode

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>           
Enter fullscreen mode Exit fullscreen mode

source code
You can take a look at my website

Thank You

Follow me on twitter, github and linkedin

Buy Me A Coffee

Top comments (0)