No video
Grid do Bootstrap - Tutorial de Como Criar Layouts Responsivos
Рет қаралды 42,995
Күн бұрынApesar de simples, muitas pessoas ainda utilizam a grid do Bootstrap de forma incorreta, neste vídeo eu ensino o que é a grid do bootstrap, como utilizar a grid e quais as boas práticas.
Documentação da Grid do #Bootstrap:
getbootstrap.c...
✅ VEJA TAMBÉM
▸ CSS Grid - Aula Completa: • CSS Grid - Crie Layout...
▸ CSS Flexbox - Aula Completa: • FLEXBOX CSS - TUDO O Q...
▸ 5 cursos grátis de programação: • 5 Cursos GRÁTIS de Pro...
▸ Aprender Front-end em 3 meses, é possível?: • Aprender FRONTEND em 3...
✅ Inscreva-se no nosso canal!
youtube.com.br/...
✅ Siga-nos nas redes sociais!
layercomp.net/...
🔴 MEU SETUP
layercomp.net/...
00:00 Grid do Bootstrap
00:19 O que é e como funciona uma grid
00:47 Importando a grid
01:20 Diferença entre container e container-fluid
02:07 Como funcionam as linhas (row)
02:47 Como funcionam as colunas (col)
05:38 Variação das colunas para layouts responsivos
08:50 Como utilizar o offset
@LayerComp 2 жыл бұрын
✅ VEJA TAMBÉM ▸ CSS Grid - Aula Completa: kzfaq.info/get/bejne/gc-klcSptdHNm2g.html ▸ CSS Flexbox - Aula Completa: kzfaq.info/get/bejne/jah9gZCByN3Vd2w.html ▸ 5 cursos grátis de programação: kzfaq.info/get/bejne/jqxoZcSJzcqwiJc.html ▸ Aprender Front-end em 3 meses, é possível?: kzfaq.info/get/bejne/fN5ybLiG1NK8o2w.html
@rRo12345 3 жыл бұрын
OBRIGADO POR NÃO ENROLAR COMO NOS VÍDEOS DE 30-60 MIN BRASIL PRECISA DE MAIS PESSOAS COMO VOCÊ LINDO
@LayerComp 3 жыл бұрын
KKKK valeuuu ❤️
@bouYago 3 жыл бұрын
Esse foi o melhor video que já vi a respeito! Muito bem explicado, parabéns.
@LayerComp 3 жыл бұрын
Pow muito obrigado, fico feliz em ouvir isso! Um abraço.
@suelencabral2862 3 жыл бұрын
Idem, ja tinha visto varios videos e esse foi o unico até agora q me fez entender um pouco sobre conteiner/grid.
@vitoravelar6242 2 жыл бұрын
12 minutos melhor gasto da minhas vida obrigado !
@LayerComp 2 жыл бұрын
Kkk valeuu Vitor! 🙂
@daniiiiiiiiii5809 3 жыл бұрын
vejo minha irmã mexendo nisso com tanta fluidez e facilidade que eu fico sem ar até... vcs da programação são dm+
@IvairOsouza Жыл бұрын
Concordo com o amigo que disse que este é o melhor vídeo a respeito deste assunto, eu aprendi muito com este tutorial, show
@capybaratech377 2 жыл бұрын
Valeu meu parça. Deus te abençoe
@renanfernandes1950 2 жыл бұрын
Melhhhhooooo rxplicaçãaaaooo sobre o assunto de todo o youtubeeee kkkkkkk estou há 3 dias e 3 noites tentando entender isso e só consegui vendo seu vídeo... obrigado ganhou mais um inscrito com sino ativado kkkkkkk
@LayerComp 2 жыл бұрын
kkkk valeuu Renan, fico feliz que tenha te ajudado!
@marcosjesus07 2 жыл бұрын
Ótimo vídeo foi muito simples entender, tava batendo cabeça com coisa besta.
@DomingosNunes 2 жыл бұрын
Muito boa a explicação. Parabens.
@franferreira4578 Жыл бұрын
Melhor explicação que já vi, por favor grave cursos pra galera aprender com voce, eu compraria fácil seu curso!!!
@LayerComp Жыл бұрын
Valeuu Fran, fico mt feliz que tenha gostado! :)
@pedrocaires9969 3 жыл бұрын
Rapaz... respeito total a sua forma de explicar e a organização do vídeo com o tempo para que possamos ir direto pra onde nos interessa. Obrigado e sucesso!
@LayerComp 3 жыл бұрын
Obrigado pelo comentário, Pedro! Fico feliz que tenha gostado 🙂
@JosenitoTutoriais 3 жыл бұрын
Verdade galera! Bom dia a todos.
@anadycarvalho4925 Жыл бұрын
Muito obrigada por compartilhar conhecimento. Gratidão! Vídeo excelente, didática maravilhosa!!!
@diegogoncalves6185 3 жыл бұрын
valeu pelo vídeo. muito bem explicado. já tinha até esquecido de como usava.
@LayerComp 3 жыл бұрын
Opa, muito obrigado Diego :)
@matheusalves4627 3 жыл бұрын
Mano, faz um playlist só de bootstrap, ajuda nois !!
@LayerComp 3 жыл бұрын
Opa, pode deixar que já está nos planos kkk. Estou querendo fazer uma playlist em cima do Bootstrap 5, e cobrir todas as funcionalidades e componentes :). Valeuu
@gabrielpelizario8971 3 жыл бұрын
@@LayerComp me avise quando fizer ok show de bola sua explicação
@bossledesenvolvimentoweb6045 10 ай бұрын
Excelente, sua explicação. Muito obrigado!
@UniversoFascinante21 Жыл бұрын
bootstrap facilita a vida de todo mundo, como amo isso
@TioDeme 3 жыл бұрын
Fenomenal! Curti demais seu jeito de explicar. Consegui aprender ctgo o que não consegui em outros 10 canais. Vc tem o dom de explicar
@LayerComp 3 жыл бұрын
Opa, muito obrigado pelo comentário, fico feliz que tenha te ajudado 🙂
@anonimodosite3357 5 ай бұрын
Muito bom, muito bem explicado e direto ao ponto 👏👏👏👏👏👏!+.........
@themysteriouss 2 жыл бұрын
Melhor vídeo sobre o assunto que eu já vi. Muito obrigada por isso!
@LayerComp 2 жыл бұрын
Muito obrigado pelo comentário! :)
@ivanpaladino21 Жыл бұрын
Muita qualidade, parabéns
@jlvazora 3 жыл бұрын
Muito boa sua explicação. Simples, direta e objetiva. Didática muito legal !
@LayerComp 3 жыл бұрын
Valeuuu Jorge, fico feliz que tenha gostado! Um abraço
@MARKONEMKN1 Жыл бұрын
Explicando assim, ficou fácil entender. Obg!
@alanlopes2477 2 жыл бұрын
Muito foda, sempre me complicava nessa parte de row e col, não entendia a funcionalidade da linha, com esse vídeo ficou tudo mais simplificado! Parabéns pelo canal
@FabianaCossenzo 2 жыл бұрын
Melhor explicação que assisti sobre o assunto. Muito obrigada por ser claro e objetivo. Adorei.
@LayerComp 2 жыл бұрын
Show! Obrigado Fabiana :)
@d3master 10 ай бұрын
Bom trabalho Jovem!
@emaslll Жыл бұрын
Top demais. Parabéns pelo vídeo.
@igorfagundes2177 2 жыл бұрын
Conteúdo mt bom, vídeo muito bem explicado!
@LayerComp 2 жыл бұрын
Muito obrigado Igor! :)
@RicardoOliveira-sb5kp Жыл бұрын
Sensacional! Obrigado pelo conteúdo 😁
@guilhermehenriquesoueu 3 жыл бұрын
Meu bom.. parabens pelo simplicidade do conteudo.. direto ao ponto!! Sucesso pra ti!
@LayerComp 3 жыл бұрын
Opa, fico feliz que tenha gostado, obrigado! 🙂
@programadorprincipiante 2 жыл бұрын
Show, muito bom obrigado.
@carolinamartins8884 Жыл бұрын
obrigada cara!! voce é um anjo 🤌
@arthurbrandao4890 Жыл бұрын
Show de bola!
@guilhermebiolchi1179 2 жыл бұрын
Parabéns pelo vídeo, muito bem explicado, salvou minha vida.
@wellingtonjunior7791 2 жыл бұрын
porra! 1000 anos de curso e ninguem, absolutamento ninguem, conseguiu passar o que esse cara passou em 10 minutos. Virei seu fa
@LayerComp 2 жыл бұрын
Valeu irmão! Tmj :)
@amenocs3616 Жыл бұрын
Muito obrigado professor, estava sofrendo tentando através do CSS deixar ele responsivo quando era tão mais simples dessa forma. +1 inscrito!
@erikaharada2152 3 жыл бұрын
demais de bom seu video , parabéns !!!!!
@LayerComp 3 жыл бұрын
Valeuuu Erika :)
@LeoDimanMartinS 3 жыл бұрын
muito bem explicado! Ótimo conteúdo! Pra quem está começando agora essa jornada, que é o meu caso, foi tudo muito claro!
@Bricio.rodrigues 10 ай бұрын
Muito obrigado pelo conteúdo, ajudou demais!!!
@luizricardomello9263 2 жыл бұрын
Muito bom. Mesmo.
@rodrigorosaam 2 жыл бұрын
Esse foi o melhor video que já vi a respeito! Muito bem explicado, parabéns. /2
@LayerComp 2 жыл бұрын
Show! Obrigado Rodrigo :D
@leaoinatuzim6992 2 жыл бұрын
Parabéns pelo conteúdo, foi direto ao ponto com uma didática simples. Exatamente oque eu estava procurando.
@LayerComp 2 жыл бұрын
Valeu Leao, tmj :)
@fsbf1 3 жыл бұрын
Muito bom. Rápido e direto ao ponto e bastante informação útil. Parabéns
@LayerComp 3 жыл бұрын
Valeu Fernando! 🙂
@jiuJitsuCuts 3 жыл бұрын
parabéns pela aula!!!!
@LayerComp 3 жыл бұрын
Valeuu Luiz! 🙂
@inaciosilvabernardo8480 2 жыл бұрын
Muito obrigado. Explicou super bem!!!👍
@cielysouza7388 3 жыл бұрын
Parabéns pelo vídeo! A forma sucinta e didática de explicar é sensacional. Estudantes cansadas e com pressa agradecem o tamanho do vídeo. (o='
@LayerComp 3 жыл бұрын
Muito obrigado pelo comentário, Ciely 🙂
@delfadorbr6033 3 жыл бұрын
Cara você é foda, muito bom esse vídeo
@LayerComp 3 жыл бұрын
Valeuuu, Alex 🙂
@vitoriafante 2 жыл бұрын
Muito bom esse vídeo!!!!! Explica super bem, parabéns.
@thiagorock554 2 жыл бұрын
Muito bom esse vídeo , aprendi algumas coisas que não sabia sobre o Bootstrap. Valeu.
@carvalhodouglaspt 2 жыл бұрын
Cara que aula você deu! Parabéns, mereceu minha inscrição...
@LayerComp 2 жыл бұрын
Show! Obrigado Douglas 🙂
@suelencabral2862 3 жыл бұрын
Parabéns pelo conteúdo. Muito esclarecedor! Eu ja tinha visto alguns vídeos sobre este tema e ainda sim não estava claro pra mim. Muito grata!
@LayerComp 3 жыл бұрын
Muito obrigado, Suelen :). Fico feliz que tenha ajudado, um abraço!
@wesleysilva5482 3 жыл бұрын
Esse lance de deixar um lado em branco com o offset salvou minha pele aqui haha estava procurando exatamente como fazer isso., ótimo vídeo, vlw !!
@LayerComp 3 жыл бұрын
Showw Wesley! Fico feliz em ter ajudado :)
@lopees8908 2 жыл бұрын
Obrigadão, era exatamente o que estava procurando, muito bem explicado!
@fabiobarros1005 3 жыл бұрын
Você tá de parabéns.
@LayerComp 3 жыл бұрын
Opa, obrigado Fabio :)
@fabiobarros1005 3 жыл бұрын
@@LayerComp Se tiver Git passa pra gente estudar com seus projetos abertos, meu amigo.
@andreluissimoes4200 3 жыл бұрын
Primeira vez que comento um vídeo. Ótima explicação, muito obrigado!
@LayerComp 3 жыл бұрын
Que honra receber seu primeiro comentário, Andre! Muito obrigado 🙂
@LucasLima-hj5sg 3 жыл бұрын
Eu to com medo do KZfaq. Estava sofrendo pra aprender design responsivo com bt5 e vem essa maravilha de video
@LayerComp 3 жыл бұрын
Obrigado Lucas! Fico feliz que tenha gostado :)
@LucasLima-hj5sg 3 жыл бұрын
@@LayerComp Quem agradece é a comunidade! Parabéns!
@samuelsantanna6724 3 жыл бұрын
muito bom o video, DIRETO AO PONTO
@sanchessantos7153 3 жыл бұрын
Muito bom, estava um pouco enferrujado no Bootstrap e esta aula foi muito interessante. Valeu, já me inscrevi!
@LayerComp 3 жыл бұрын
Show! Fico feliz que tenha ajudado. Obrigado pelo comentário e pela inscrição
@richardmouret6674 2 жыл бұрын
Muito bom mano! Parabéns!!!
@marioohashi 2 жыл бұрын
Parabéns pelo video, prático e objetivo. Valeu bro!
@LayerComp 2 жыл бұрын
Valeu Mario :)
@luizricardomello9263 2 жыл бұрын
Muito bom! meu.
@eltonsantos8804 2 жыл бұрын
Parabéns professor! Ótimo conteúdo e didática. Ganhou +1 inscrito!
@MegaMathelo 3 жыл бұрын
Parabéns pelo conteúdo, Grato por compartilhar seu conhecimento, Sucesso pra Vc.
@LayerComp 3 жыл бұрын
Obrigado Thélo! 🙂
@ildacastelo5297 3 жыл бұрын
Parabéns pelo vídeo.👏👏
@lucasparis9862 3 жыл бұрын
+1 Inscrito; Vídeo extremamente objetivo, bem explicado com um ótimo tom de voz. Você é muito bom, parabéns.
@LayerComp 3 жыл бұрын
Muito obrigado BL, fico feliz que tenha gostado :)
@lucasfernando7095 Жыл бұрын
Parabéns excelente explicação e apresentação do conteúdo! era exatamente o que eu buscava mano!
@etrosul1 3 жыл бұрын
Excelente vídeo. Me ajudou muito. Parabéns e obrigado
@LayerComp 3 жыл бұрын
Fico feliz que tenha ajudado. Valeu pelo comentário Fernando! 🙂
@Juan-jcm 3 жыл бұрын
Excelente tutorial! Parabéns!
@LayerComp 3 жыл бұрын
Obrigado Juan! :)
@alanlima4657 3 жыл бұрын
Muito bom. Gostei do canal!
@Dutradee 3 жыл бұрын
Você está de parabéns meu amigo, agora estou conseguindo fazer html e css
@LayerComp 3 жыл бұрын
Show! Obrigado pelo comentário, Eduardo. 🙂
@Dutradee 3 жыл бұрын
@@LayerComp Me passa seu contato, você faz trabalhos de UI e Front End ? Estou precisando para um projeto.
@LayerComp 3 жыл бұрын
@@Dutradee faço sim! No momento não estou pegando projetos novos por questão de tempo mesmo, estou com bastante demanda. Mas caso queira entrar em contato, meu e-mail é contato@rodrigodocarmo.com.br, um abraço.
@tallesmachadorodrigues9942 Жыл бұрын
Excelente video parabens ai
@demetrionascimento 3 жыл бұрын
Se você usar slides exemplificando graficamente o que está falando, ficaria ainda mais fácil de entender. Mas valeu o like e a inscrição. Continue por favor com seu trabalho.
@LayerComp 3 жыл бұрын
Obrigado pelas sugestões e pela inscrição Demério! Nos próximos vídeos vou tentar seguir com alguns slides de apoio 🙂. Em breve postarei vídeos novos relacionados a layouts, um abraço!
@guilhermerocha4845 3 жыл бұрын
Muito bom!!! Excelente vídeo
@LayerComp 3 жыл бұрын
Obrigado Guilherme :)
@sralgoritmo1216 2 жыл бұрын
Agora eu entendi rsrs
@gmontanher97 3 жыл бұрын
vlww irmao, ensinou mt bem de forma rapida!
@Eduardo-fv8lw Жыл бұрын
ajudou d+, obgg
@linekker1 2 жыл бұрын
Mano oque me confundi é que na hora de fazer a responsividade devo usar o Media Query ou esses COL do Grid Bootstrap ?
@LayerComp 2 жыл бұрын
As grids do bootstrap também utilizam media queries. Você pode utilizar o codigo pronto deles para posicionar elementos, e utilizar as media queries para excessões que não existem na grid deles. Mas caso você não queira importar a biblioteca deles, você pode utilizar CSS grid e flexbox também para criar esses tipos de layout. 🙂
@demetriodasilvapassos2523 Жыл бұрын
top !
@yankarlotexeira 3 жыл бұрын
Bem legal. Parabéns.
@LayerComp 3 жыл бұрын
Valeu Yan 🙂
@renandamaia 3 жыл бұрын
Show a explicação, parabéns! Só uma dúvida, quando vc abre no navegador e vai ajustando o layout, vc utiliza alguma ferramenta especifica pra isso ou é função do navegador mesmo?
@LayerComp 3 жыл бұрын
Opa, obrigado! É a função do próprio navegador mesmo. Só ir em "Inspecionar", e apertar Ctrl + Shift + M ou clicar no ícone "Toggle Device Toolbar"
@macena-shiftit Жыл бұрын
O ideal seria eu pegar todo o conteúdo do meu body e construir dentro de uma estrutura "container > rows e cols"?
@wagnerbreggi2943 2 жыл бұрын
Fiz um formulário com 4 linhas e em cada linha tem 5 campos. Qdo envolví o form com um fieldset. o form estreitou e ficou com um espaço enorme a direita. Eu não consegui enconstar os campos a direita no bordo do fieldset. Sempre fica com um espaço a direita. Isso tem haver com essa aula ? Obrigado.
@GHOSTBRSERVER 3 жыл бұрын
Ola uma duvida, onde vejo todas as class no Bootstrap ?, e que elas fazem, dei uma olhada no site mais nao encontrei uma pagina com todas as class e o que elas fazem, tem algum outro site onde possa ver isso? obrigado e parabens pelo video
@LayerComp 3 жыл бұрын
Opa, na documentação você consegue ir navegando pelas categorias no lado esquerdo, lá você encontra todas as classes :). Link da documentação do Bootstrap 5: getbootstrap.com/docs/5.0/getting-started/introduction/
@marcospimentel6896 2 жыл бұрын
Dica para quem está assistindo o video, veja com calma, pause o video, entenda o html e as divs
@pliniocarvalho6288 2 жыл бұрын
E com foreach? eu criei um card para cada informação que vem do meu loop só que apesar de eu usar "row" e "col" eu não consigo por nada fazer os cards vim um do lado do outro, eles só vem um em baixo do outro, alguém sabe como resolver?
@kayroravel6705 Жыл бұрын
TOOOOOOOOOP !!!
@AdrianodeOliveira98 2 жыл бұрын
Olá, parabéns pela iniciativa. Excelente vídeo. Uma dúvida, no minuto 10:43, quando você coloca o tamanho das colunas md-4, a quarta coluna vai pra baixo quando diminui a tela. Blz. Mas como você conseguiu que ela ficasse com um espaçamento entre a de cima? Quando faço isso as colunas que são empurradas pra baixo ficam coladas com as de cima. Desculpa a ignorância. Tô aprendendo. Obrigado.
@LayerComp 2 жыл бұрын
Opa, obrigado pelo comentário! Eu fiz isso adicionando um margin-bottom na classe ".fundo-vermelho". Você também pode conseguir um resultado similar utilizando a classe gap no Bootstrap 5, assim como nestes exemplos aqui: getbootstrap.com/docs/5.0/utilities/spacing/
@AdrianodeOliveira98 2 жыл бұрын
@@LayerComp Valeeeu. Vou olhar sim. Muito obrigado.
@iagobispo7583 3 жыл бұрын
Fala meu irmão, blz ? Para utilizar com o react native e o msm processo ou muda alguma coisa ?
@LayerComp 3 жыл бұрын
Opa, tudo certo? Então, pelo React Native, se você estiver utilizando o Bootstrap, vai mudar somente a forma que você define as classes, no caso você vai utilizar algumas tags do tipo Col, como visto aqui neste exemplo: react-bootstrap.github.io/layout/grid/ Mas mesmo que não seja a grid do bootstrap, outras grids normalmente trabalham de formas similares.
@guilhermecardoso5075 2 жыл бұрын
vídeo muito bom, tenta explicar isso novamente só que pra leigos kkkkkkk
@freddyrick4196 2 жыл бұрын
Mt boa a aula, que tema é esse?
@GustavoFilgueiras 3 жыл бұрын
Bom dia ! Parabens pelo canal ! é possivel usar grid e flex no mesmo projeto?
@amissadaiferreira4229 3 жыл бұрын
Sim
@LayerComp 3 жыл бұрын
Opa, é possível sim, a própria grid do Bootstrap 4+ utiliza flex para distribuir os itens
@GustavoFilgueiras 3 жыл бұрын
Nao imagino como rs Fica aí um bom tema para o próximo video
@gustavocosta3963 3 жыл бұрын
Valeeeu!
@both-eritonsotaku6860 3 жыл бұрын
Não entendi muito bem, baixei o bootstrap e ele parece que não tem o col mas tem o col-xs, vou olhar na documentação '-'
@LayerComp 3 жыл бұрын
Isso é por causa da versão do Bootstrap, o col-xs- parou de ser utilizado na versão 4, você deve ter baixado a versão 3
@duferreira1477 3 жыл бұрын
Video muito bom! Ganhou mais 1 inscrito!!!
@LayerComp 3 жыл бұрын
Show! Obrigado pelo comentário, Eduardo. 🙂
@LucianoSiqueirinha 2 жыл бұрын
Qualno navegador que esta usando?
@LayerComp 2 жыл бұрын
É o Google Chrome
@rodrigolima2819 9 ай бұрын
fui de base aos 10:38
@wallacehenrique324 2 жыл бұрын
Hmmm , essa sua voz aí me parece muito com a do ... hmm... a do ODA!
4 жыл бұрын
po ainda n entendi
@LayerComp 4 жыл бұрын
Quais são suas dúvidas LeiTeKun? Deixe aqui nos comentários que eu tento te ajudar.
4 жыл бұрын
@@LayerComp em não entendi pra que serve as grids com usam ela em um site posicionar etc
@samaralemos Жыл бұрын
Que vídeo formoso, que vídeo bem feito! Kkk Melhor explicação que eu assisti, vai me ajudar demais na prova de programação. Parabéns! 👏🏻
@LayerComp Жыл бұрын
kkk valeu Samara! Fico feliz que tenha ajudado
Family Games Media
Рет қаралды 29 МЛН
Prof. Tiago Segato
Рет қаралды 3,2 М.
Rodrigo M.S.
Рет қаралды 128 М.
Filipe Deschamps
Рет қаралды 831 М.