I am building a page with bootstrap and I already got the navbar and footer to be responsive but the body I don't know how to do it. just like I have a side browser that accompanies the user. Here I show you the html code
<div class="container-fluid fondoblanco shadow-lg col-8">
<div style="padding-bottom: 100px;">
<img
class="logo"
align="center"
src="img/index/quienesSomos.png"
alt="logo"
style="max-width: 100%; height: auto;"
/>
</div>
<div
class="row text-light jumbotron shadow"
style="background-color: #1c2a48;"
>
<div class="col-6">
<div class="p-5">
<h2 class="" align="left">¿Qué es Bitonoff?</h2>
<p class="text-justify parrafo">
Grupo Bitonoff C.A les Ofrece Las mejores ofertas en curso.
Nuestros certificados son <b>100% apostillables</b>.
</p>
</div>
</div>
<div class="col-6">
<div class="p-5">
<h2 class="" align="left">Lorem</h2>
<p class="text-justify parrafo">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
totam consequatur architecto vero dolor magni fugiat dolorem
repudiandae voluptatem. Minus nam accusamus rem facilis,
aspernatur placeat enim alias aliquid iste.
</p>
</div>
</div>
</div>
<div class="container py-5">
<div class="row">
<div class="col tarjetacentro">
<div class="card shadow-lg redounded" style="width: 13rem;">
<img
class="card-img-top"
src="img/index/muestra/marcha.jpg"
alt="Imagen Muestra"
/>
<div class="card-body">
<h5 class="card-title text-center">Día del músico</h5>
<p class="card-text text-center">
Marcha día del músico 2019
</p>
</div>
</div>
</div>
<div class="col tarjetacentro">
<div class="card shadow-lg redounded" style="width: 13rem;">
<img
class="card-img-top"
src="img/index/muestra/diploma.jpg"
alt="Imagen Muestra"
/>
<div class="card-body">
<h5 class="card-title text-center">Diploma</h5>
<p class="card-text text-center">
Entrega de Diploma "Pedro Gual"
</p>
</div>
</div>
</div>
<div class="col">
<div class="card shadow-lg redounded" style="width: 13rem;">
<img
class="card-img-top"
src="img/index/muestra/orquesta.jpg"
alt="Imagen Muestra"
/>
<div class="card-body">
<h5 class="card-title text-center">Orquesta Caripito</h5>
<p class="card-text text-center">
Orquesta sinfónica Infantil
</p>
</div>
</div>
</div>
</div>
</div>
<div class="container py-5 experiencia">
<h2 class="titulo text-center">
<b>
Con más de 10 años de experiencia
</b>
</h2>
</div>
</div>
And the side browser is like this
<div class="social">
<ul class="shadow-lg rounded">
<li class="">
<a class="" href="https://www.facebook.com/" target="_blank">
<img
src="img/redes/facebookF.svg"
alt="facebook"
width="30"
height="40"
/>
</a>
</li>
<li class="">
<a class="" href="https://www.twitter.com/" target="_blank">
<img
src="img/redes/twitterF.svg"
alt="twitter"
width="30"
height="40"
/>
</a>
</li>
<li class="">
<a class="" href="https://www.instagram.com/" target="_blank">
<img
src="img/redes/instagramF.svg"
alt="instagram"
width="30"
height="40"
/>
</a>
</li>
</ul>
</div>
My doubt is... How do I make it responsive and I would like to learn since this is only the index of the page. Also in the sidebar how would I do? would it stay fixed there or is there a way to make it also responsive? this is what my sidebar looks like
the bootstrap classes on the columns, to make them responsive you have to add for example the following way.
In this example
In Bootstrap 4 the grid system is divided into 12 columns. where