Como tornar pagina responsiva para mobile com bootstrap?

Front-end
#1

exemplo.rar (553,9 KB)

tenho todo projeto aqui, como faço para ficar responsivo?

#2

O Bootstrap possui algumas classes para tornar o seu site responsivo.

#3

Okay, isso eu entendi em alguns vídeos no youtube…
agora: como utilizar…
no css comum você coloca:
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
e pronto, coloca o código e tá tudo certo e no bootstrap?

#4

No bootstrap você usa as classes col-xs, col-sm, col-md, col-lg

#5

poderia me da um exemplo?

#6 
<div class="row">
  <div class="col-12 col-md-8 col-lg-4">Aqui ocupa 12 colunas em uma tela < 576px, aqui ocupa 8 colunas em uma tela >= 768px e ocupa 4 colunas em uma tela >= 1200px</div>
  <div class="col-12 col-md-4">Aqui ocupa 12 colunas em uma tela < 576px, aqui ocupa 4 colunas  em uma tela >= 768px e ocupa 4 colunas em uma tela >= 1200px</div>
</div>

Aqui tem um bom material sobre os tamanhos

#7

Assim funciona de boas.

@media (max-width: 575.98px) {

.carousel.slide{
height: 300px;
}
.carousel.slide img{
height: 300px;
}

}