2

Alguém tem ideia de como centralizar estes botões que estão dentro de uma div com class="row", como está centrado o contêiner acima a dizer "Permissões", com Bootstrap e de maneira a que sejam responsivo?

Imagem com row a centrar

Este é o código:

<div class="row container-fluid text-center">
  <div class="btn-group">
    <button onclick="mostrar_form_alunos()" class="btn btn-info btnSpace" type="button">Permissões de alunos </button>
    <button onclick="mostrar_form_professores()" class="btn btn-info btnSpace" type="button">Permissões de professores </button>
    <button onclick="mostrar_form_funcionarios()" class="btn btn-info btnSpace" type="button">Permissões de funcionários </button>
    <button onclick="mostrar_form_curso()" class="btn btn-info btnSpace" type="button">Permissões de curso </button>
    <button onclick="mostrar_form_geral_de_professores()" class="btn btn-info btnSpace" type="button">Permissões geral de professores </button>
    <button onclick="mostrar_form_geral_de_funcionarios()" class="btn btn-info btnSpace" type="button">Permissões geral de funcionarios </button>
  </div>
</div>

[UPDATE]

Já consegui alinhar agora neste momento o texto sai é dos botões e não consigo pôr o texto todo lá dentro. Fica assim:

inserir a descrição da imagem aqui

4
  • Qual versão do Bootstrap?
    – hugocsl
    25/06/2018 às 17:39
  • 1
    Cara pra que repetir "Permissões em todos os btns? Se vc já está na Sessão Permissões vc pode agrupar todos esses btns dentro de um box por exemplo e retirar a palavra "Permissão" de todos os btns. Sei que não resolve o problema, mas é uma dica
    – hugocsl
    25/06/2018 às 23:38
  • O texto sai dos botões porque os botões têm uma largura definida que é menor que a largura necessária para o texto caber. Pode criar uma classe personalizada no CSS para forçar a quebra do texto: *.btn-wrap-text { white-space: normal !important; word-wrap: break-word !important; } 26/06/2018 às 9:02
  • Cara repara lá que editei a minha resposta e coloquei a solução para o BS3, repara lá que eu mudei de 'container-fluid' para apenas 'container' para vc ver como ficou responsivo etc...
    – hugocsl
    26/06/2018 às 20:51

3 Respostas 3

3

Utilizando a grelha e as propriedades dos componentes do Bootstrap corretamente o comportamento que pretende seria conseguido da seguinte forma:

<!doctype html>
<html lang="pt">

<head>
    <title>Exemplo</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous">

</head>

<body>
    <div class="container-fluid">

        <div class="row text-center">
            <div class="col">
                <div class="alert alert-primary" role="header">
                    <h4 class="alert-heading">Permissões</h4>
                </div>
            </div>
        </div>

        <div class="row text-center">
            <div class="col-2">
                <button class="btn btn-block btn-info btnSpace" type="button">Botão</button>
            </div>
            <div class="col-2">
                <button class="btn btn-block btn-info btnSpace" type="button">Botão</button>
            </div>
            <div class="col-2">
                <button class="btn btn-block btn-info btnSpace" type="button">Botão</button>
            </div>
            <div class="col-2">
                <button class="btn btn-block btn-info btnSpace" type="button">Botão</button>
            </div>
            <div class="col-2">
                <button class="btn btn-block btn-info btnSpace" type="button">Botão</button>
            </div>
            <div class="col-2">
                <button class="btn btn-block btn-info btnSpace" type="button">Botão</button>
            </div>
        </div>

    </div>
</body>

</html>


Qualquer das formas acho que existem alguns conceitos do Bootstrap que você deve entender para conseguir trabalhar melhor e bem com a framework:

  • Um .container contém .row, ou seja, os elementos .row devem estar dentro do .container, não deve usar ambas as classes para a mesma div;
  • Uma div .row pode ser composta por div .col num total de 12 unidades de largura;
  • As .col podem conter componentes;
  • Os .button-group servem para quando queremos os botões juntos, quase como "colados".

Recomendaria dar uma vista de olhos ao resumo do layout e à forma como a grelha funciona. Pode também ler sobre o comportamento dos botões.

2
  • já experimentei, fica responsive, só que ficam os botões em baixo uns dos outros e com o mesmo comprimento que o container de cima. eu queria pô-los como na imagem que pus acima, só que alinhados com o container de cima, os botões ficariam daquele tamanho e ao lado uns dos outros como estão, mas centrado tal como o container por cima deles.
    – py_9
    25/06/2018 às 17:05
  • 1
    Os botões só ficam por baixo uns dos outros se não houver espaço para ficarem ao lado uns dos outros, é um comportamento esperado da grelha flex do Bootstrap. Quanto ao a eles ficarem com a largura do cabeçalho das permissões, alguma .row deve estar mal. Actualizei o exemplo com a implementação do cabeçalho de permissões com recurso a um .alert. Veja se ajuda. 26/06/2018 às 8:59
3

Bootstrap 3

No BS3 como o flex não é nativo vc pode construir os estilos na mão. Veja como fica no exemplo abaixo.

.permissoes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.permissoes button {
    flex: 1;
    margin: 6px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="container">
    <div class="row">
        <div class="permissoes col-xs-12 ">
            <button onclick="mostrar_form_alunos()" class="btn btn-info btnSpace m-1 " type="button">Permissões de alunos </button>
            <button onclick="mostrar_form_professores()" class="btn btn-info btnSpace m-1" type="button">Permissões de professores </button>
            <button onclick="mostrar_form_funcionarios()" class="btn btn-info btnSpace m-1" type="button">Permissões de funcionários </button>
            <button onclick="mostrar_form_curso()" class="btn btn-info btnSpace m-1" type="button">Permissões de curso </button>
            <button onclick="mostrar_form_geral_de_professores()" class="btn btn-info btnSpace m-1" type="button">Permissões geral de professores </button>
            <button onclick="mostrar_form_geral_de_funcionarios()" class="btn btn-info btnSpace m-1" type="button">Permissões geral de funcionarios </button>
        </div>
    </div>
</div>


Bootstrap 4

Você não necessariamente precisa colocar os botões dentro do Grid, o fato de coloca-los dentro do Grid é que está fazendo seu texto estourar o box do btn, pois quem determina a largura do seu btn é a largura da coluna do Grid.

Como o Bootstrap 4 tem flex nativo vc pode usar apenas algumas Classes Originais do BS4 pra ajustar esses botões etc. Na div pai coloquei as classe: d-flex justify-content-center flex-wrap e nos btns para fazr as margens usei a classe m-1

Repare que não tem CSS no código abaixo apenas as classes nativas do BS4 que mencionei acima. Repare tb que conforme a tela vai diminuindo os botões vai "caindo" para a linha de baixo, mas quando a tela for larga o suficiente todos vão ficar na mesma linha!

OBS: Vc pode usar uma classe por exemplo .permissoes button { flex: 1; } para fazer o btn que quebrar para linha de baixo ocupar 100% da largura da tela.

.permissoes button {
    flex: 1;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
    
<div class="container-fluid">
    <div class="row">
        <div class="permissoes col-12 d-flex justify-content-center flex-wrap">
            <button onclick="mostrar_form_alunos()" class="btn btn-info btnSpace m-1 " type="button">Permissões de alunos </button>
            <button onclick="mostrar_form_professores()" class="btn btn-info btnSpace m-1" type="button">Permissões de professores </button>
            <button onclick="mostrar_form_funcionarios()" class="btn btn-info btnSpace m-1" type="button">Permissões de funcionários </button>
            <button onclick="mostrar_form_curso()" class="btn btn-info btnSpace m-1" type="button">Permissões de curso </button>
            <button onclick="mostrar_form_geral_de_professores()" class="btn btn-info btnSpace m-1" type="button">Permissões geral de professores </button>
            <button onclick="mostrar_form_geral_de_funcionarios()" class="btn btn-info btnSpace m-1" type="button">Permissões geral de funcionarios </button>
        </div>
    </div>
</div>


Veja que a tela tem que ser bem larga para caberem todos os btns na mesma linha

inserir a descrição da imagem aqui

8
  • 1
    Nunca tinha visto a ser aplicado o flex do BS4, bastante interessante! Dá para fazer com que abaixo de um certo tamanho (por exemplo col-md) eles passem a ter uma largura fixa? Dessa forma quando eles fizessem "quebra de linha" ficavam alinhados. 26/06/2018 às 13:29
  • 2
    @TiagoLeite sim editei minha resposta, repare que agora eu coloquei uma linha de css para setar flex-1 nos btns, veja na OBS que coloquei na resposta agora.
    – hugocsl
    26/06/2018 às 13:50
  • @hugocsl Dá para fazer o mesmo com o BS3?
    – py_9
    26/06/2018 às 18:51
  • 1
    Da sim, a estrutura do HTML não vai mudar praticamente nada. Vai continuar .container > .row > .col-xs-12 e na <div class="permissoes col-xs-12> vc define a classe .permissoes {display:flex; flex:wrap; justify-content:center } qualquer dúvida fala ai. acredito que vai dar certo! Lembre-se de também colocar uma margin para separar os btnt e eles não ficarem colados um no outro.
    – hugocsl
    26/06/2018 às 18:57
  • 2
    @py_9 no Bootstrap 3 não existe col-12, o correto seria col-xs-12, isso significa que a coluna sempre vai ter a largura máxima, vc pode consultar a documentação aqui getbootstrap.com/docs/3.3/css/#grid. Cara sempre tenha muita atenção para não misturar as classes de uma vesão na outro. o BS3 não tem flex por default como o BS4 tem por exemplo...
    – hugocsl
    26/06/2018 às 19:53
1

Coloca cada botão em uma col-2/col-sm-2/col-md-2/col-lg-2/col-xl-2, e dps aplique um "width: 100%;" no css dele

5
  • 2
    Usar width:100% não é boa prática quando é possível obter o efeito pretendido com classes nativas do Boostrap. Experimente aplicar a .btn-block. 25/06/2018 às 15:59
  • btn-block em cada botão ? ou numa das divs? @TiagoLeite
    – py_9
    25/06/2018 às 16:02
  • 1
    No <button> tal como explicado na documentação oficial getbootstrap.com/docs/4.0/components/buttons/#sizes . Atenção que isto faz com que os botões ocupem a totalidade da div em que se encontram, pelo que deve fazer nas mesmas as divs como indicado pelo @UltraDEV 25/06/2018 às 16:06
  • Ok, e as outras divs deixo-as? btn-group e a div row? @TiagoLeite
    – py_9
    25/06/2018 às 16:10
  • 1
    @py_9 Veja a resposta/proposta de resolução que acabei de publicar. Se tiver alguma dúvida sobre essa abordagem por favor deixe em comentário lá. 25/06/2018 às 16:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .