Center div of class="row" with bootstrap

Question

Center div of class="row" with bootstrap

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

2

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

Thisisthecode:

<divclass="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 been able to align right now right now the text is out of the buttons and I can not put the whole text in there. It looks like this:

html twitter-bootstrap

asked by anonymous 25.06.2018 / 17:44

3 answers

3

Bootstrap 3

In BS3 as flex is not native you can build the styles at hand. See 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 putting them inside the Grid is that it is causing your text to pop up 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 use only a few BS4 Original Classes to adjust these buttons etc. In the parent div I put the class: d-flex justify-content-center flex-wrap and in the btns to make the margins I used the class m-1

Notice that there is no CSS in the code below just the native BS4 classes I mentioned above. Note that as the screen goes down the buttons will "drop" to the bottom line, but when the screen is wide enough everyone will stay on the same line !

OBS: You can use a class eg .permissoes button { flex: 1; } to make btn that break to bottom line occupy 100% of 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 on the same line

26.06.2018 / 13:44

1

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%;" in his css

25.06.2018 / 17:56

How to modify the last item in a string in Java? How to consume less memory in C # runtime?

score 2 · Accepted Answer

Using the grid and properties of Bootstrap components correctly, the behavior you want would be accomplished 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 Bootstrap concepts that you should understand in order to work better and better with the framework :

A .container contains .row , that is, .row elements must be within .container , you should not use both classes for the same div ;
A div .row can be made up of div .col for a total of 12 units wide;
The .col may contain components;
The .button-group are for when we want the buttons together, almost like "pasted."

I'd recommend taking a look at the summary of the layout and the way as the grid works. You can also read about the behavior of buttons .