Bootstrap Utilitários, grid e columns

Olá neste artigo vamos discutir sobre classes, columns e utilitarismo no bootstrap. O intuto aqui é apenas educativo aproveite para se aprofundar assim que terminar este artigo.

  • Oque Vamos Estudar?

  • Display Grid Em Bootstrap.

  • Utilitários Em Bootstrap.

  • Columns.

  • Display Grid Em Bootstrap.

  • Vamos começar dividindo a tela em partes com grid do boostrap a classe usada para isso é col-*.

    • col-12 Tamanho máximo.

    • col-6 Metade do tamnho.

    • col-4 25% do tamanho.

    • col-2 +- 12% do tamanho.

        • Sempre que falamos sobre grid em bootstrap estamos nos referindo a flexbox.

        Sinta-se avontade para usar os números intermediários entre as classes passadas como por exemplo:
        col-5, col-3 col-1 e etc...
        agora vamos falar de display: display em css é como definimos o comportamentos dos elementos exibidos.
        exemplo: display:inline;/* aqui declaramos que é inline ou seja em apenas um linha */.
        Outro exemplo: display: flex; /* display flex é um comportamento que garante comportamento responsivo */.
        Se utilizarmos devidamente as classes bootstrap col-12 e d-flex teremos um container com comportamento responsivo que cobre a área inteira da tela.
        Seguindo mesmo raciocínio:

        < div class="col-12">
        < div class="col-6 bg-success">< /div>
        < div class="col-6 bd-sucess">< /div>
        < /div >

        Este pedaço de demarcação exemplifica dois containers com fundo azul que se adptam para metade da tela com bootstrap. Assim podemos ver o poder do bootstrap e do display flex em ação.

        Também vale destacar que o boostrap também possui outros utulitários como:
        fs-1/fs-4/fs-6< fontes de letras responsivas
        col-sm/col-md/col-lg < muito importante para responsividade.
        h-auto/h-100/h75 < para definir altura no geral sempre em %.
        m-* < para espaçamento externo
        p-* < para espaçamento interno
        combinando col-sm e col-md por exemplo podemos fazer um layout que se adapte a celulares pequenos/tablets. Claro não podemos esquecer do h-*.
        exemplo:

        < div class="h-100 col-sm col-md-12 d-flex flex-wrap">
        < div class="m-2 p-2 h-50 col-md-6 col-md-12 bg-success">< /div>
        < div class="m-2 p-2 h-50 col-md-6 col-md-12 bd-sucess">< /div>
        < /div>

        Acima possuimos um layout responsivo para tablet 2 linhas com tamanho máximo 1 coluna. e para celular 2 colunas e 1 linha. observe que adicionei flex-wrap para que o display flex se quebre se necessário.

  • utilitários:

    Com fs-* podemos usar de fontes com tamnhos variádos para nosso site:
    fs-* vem aconpanhado de números para representar o tamanho escolhido, exemplo: fs-1: maior fonte possível para o elemento, fs-6 o menor tamanho

    < div class="col-sm col-md-12 d-flex flex-wrap">
    < div class="col-md-6 col-md-12 bg-success">
    < p class="fs-1">Olá Mundo< /p>
    < p class="fs-4">Olá Mundo< /p>
    < /div>
    < div class="col-md-6 col-md-12 bd-sucess">< p class="fs-6">< /p>Olá Mundo< /div>
    < /div>

  • Grid Com Bootstrap

  • Para encerramos vamos discutir um pouco sobre grid e columns, columns nós leva a pensar sobre flex-direction:
    flex-direction: row; < em linhas ou seja sempre ordena 1 linha e aumenta as colunas (cresce para os lados).
    flex-direction: column; < em linhas ou seja sempre ordena 1 coluna e aumenta as linhas (cresce para baixo).
    Repectivamente em seletores bootstrap:
    flex-row
    flex-column

Copyright @2025 Gabriel Morais De Carvalho