React boostrap

instalar desde consola

 

npm install react-bootstrap bootstrap

Luego desde tu proyecto react agregar la linea de estilos en app.js o index.js

{/* The following line can be included in your src/index.js or App.js file*/}

import 'bootstrap/dist/css/bootstrap.min.css';

El siguiente codigo te muestra el funcionamiento de la grilla que depende de row para generar filas y col para generar las columnas la suma debe dar 12 y hay 4 formatos

        <div>

            <header>

                <div className="container">

                    <h1>Header</h1>

                </div>

            </header>

            <div className="container">

                <section className="main row">

                    <article className="col-xs-12 col-sm-12 col-md-6 col-lg-10">

                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi quia et tenetur distinctio quae minus perspiciatis similique officia ea nulla rerum rem iste assumenda odit reprehenderit recusandae, ipsa aperiam inventore, necessitatibus repellat soluta. Provident facilis cumque dignissimos odio dicta. Esse nam animi eos alias fuga nulla, numquam distinctio labore voluptate!

                    </article>

                    <aside className="col-xs-12 col-sm-12 col-md-6 col-lg-2">

                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia deserunt tempora dignissimos, quis totam ullam cumque molestiae corrupti architecto temporibus neque, possimus quo doloremque voluptate illo. Consequuntur iure enim expedita!</p>

                    </aside>

                </section>

            </div>

        </div>

se ejecuta bajo el criterio mobile first es decir si col-lg no existiera tomaria el valor de la clase anterior para ese tamaño que seria col-md

si solo colocas 1 cuando llegue a ese tamaño se pone uno debajo de la otra