Centralize div de class="Row" with bootstrap

Question

Does anyone have any idea how to center these buttons that are inside a div with class="row", how is centered the above container saying "Permissions", with Bootstrap and so that they are responsive?

This is the code:

<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]

I’ve already been able to align now the text comes out of the buttons and I can’t put all the text inside. It looks like this:

Answer 1

Bootstrap 3

In BS3 as the flex is not native you can build the styles in hand. See how it looks in the example below.

.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

You do not necessarily need to put the buttons inside the Grid, the fact of placing them inside the Grid is what is making your text pop the btn box, because who determines the width of your btn is the width of the Grid column.

Since Bootstrap 4 has native flex you can only use some original BS4 classes to adjust these buttons etc. In the parent div I put the classes: d-flex justify-content-center flex-wrap and in btns to do the margins I used the class m-1

Note that there is no CSS in the code below only the native BS4 classes I mentioned above. Note also that as the screen decreases the buttons will "fall" to the bottom line, but when the screen is wide enough everyone will be on the same line!

OBS: You can use a class for example .permissoes button { flex: 1; } to make btn that break down to bottom line occupy 100% of the screen width.

.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>

---

See that the screen has to be wide enough to fit all btns in the same line

Answer 2

Using the grid and properties of Bootstrap components correctly the behavior you want would be achieved as follows:

<!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>

---

Either way I think there are some concepts of Bootstrap that you must understand to be able to work better and well with the framework:

• A .container contains .row, that is to say, the elements .row must be inside the .container, should not use both classes for the same div;
• One div .row may be composed of div .col a total of 12 units wide;
• As .col may contain components;
• The .button-group are for when we want the buttons together, almost as "glued".

I’d recommend taking a look at summary of layout and how the grille works. You can also read about the behavior of buttons.

Answer 3

Place each button on a col-2/col-Sm-2/col-Md-2/col-lg-2/col-Xl-2, and dps apply a "width: 100%;" to its css