Estoy tratando de centrar una barra de herramientas horizontalmente. Encontré muchas soluciones diferentes, pero ninguna parece funcionar en Bootstrap 4.

Esto es lo más cerca que consigo, pero me obliga a dar un ancho. La barra de herramientas se coloca más a la izquierda en el panel. El número de elementos en la barra de herramientas puede variar y, por lo tanto, la barra de herramientas nunca estará realmente centrada. ¿Cómo puedo centrar correctamente una barra de herramientas?

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

		<link href="css/bootstrap.min.css" rel="stylesheet"> 
		<link href="css/main.css" rel="stylesheet"> 
	</head>

	<body class="bg-secondary">
		<div class="mx-auto" style="width: 300px; background:red">
			Centered element<br/>
			<div class="btn-toolbar mx-auto" role="toolbar">
				<div class="btn-group mr-2" role="group" aria-label="First group">
					<button type="button" class="btn btn-primary">1</button>
					<button type="button" class="btn btn-primary">2</button>
					<button type="button" class="btn btn-primary">3</button>
					<button type="button" class="btn btn-primary">4</button>
				</div>
			</div>
		</div>
	</body>

</html>

Editar: este no es un duplicado de [https://stackoverflow.com/questions/43952368]. Esa pregunta es sobre una barra de navegación , no una barra de herramientas, en un contenedor. He visto esa pregunta mientras buscaba, pero no veo cómo se aplica al html presentado. ingrese la descripción de la imagen aquí

0
Jef Patat 16 ene. 2018 a las 16:34

3 respuestas

La mejor respuesta

Hay muchas formas Puede hacer que la barra de herramientas muestre: bloque en línea (d-inline-block) y use text-center en el padre.

https://www.codeply.com/go/U3sXVBzDK4

   <div class="text-center">
      <div class="d-inline-block" style="background:red">
            Centered element<br/>
            <div class="btn-toolbar mx-auto" role="toolbar">
                <div class="btn-group mr-2" role="group" aria-label="First group">
                    <button type="button" class="btn btn-primary">1</button>
                    <button type="button" class="btn btn-primary">2</button>
                    <button type="button" class="btn btn-primary">3</button>
                    <button type="button" class="btn btn-primary">4</button>
                </div>
            </div>
        </div>
     </div>

Otra forma es usar flexbox justify-content-center en el padre (d-flex)

<div class="d-flex justify-content-center">
    <div class="btn-toolbar mx-auto" role="toolbar">
        <div class="btn-group" role="group" aria-label="First group">
            <button type="button" class="btn btn-primary">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-primary">3</button>
            <button type="button" class="btn btn-primary">4</button>
        </div>
    </div>
</div>
3
Zim 7 mar. 2018 a las 11:12

Use flexbox para centrarlos, por ejemplo. Además, su texto preferiblemente estará dentro de una etiqueta p y no solo una etiqueta div.

.mx-auto {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-self: center;
}

p {
  align-self: center;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
</head>

<body class="bg-secondary">
  <div class="mx-auto" style="width: 300px; background:red">
    <p>Centered element</p><br/>
    <div class="btn-toolbar mx-auto" role="toolbar">
      <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-primary">1</button>
        <button type="button" class="btn btn-primary">2</button>
        <button type="button" class="btn btn-primary">3</button>
        <button type="button" class="btn btn-primary">4</button>
      </div>
    </div>
  </div>
</body>

</html>
0
brooksrelyt 28 feb. 2019 a las 18:28

Otra solución que puede ser más de su agrado es simplemente agregar justify-content-center a su btn-toolbar así:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
      <div class="col-12" style="background:red">
    
        <div class="btn-toolbar justify-content-center" role="toolbar" aria-label="Toolbar with button groups">
          <div class="btn-group mr-2" role="group" aria-label="First group">
          <button type="button" class="btn btn-secondary">1</button>
          <button type="button" class="btn btn-secondary">2</button>
          <button type="button" class="btn btn-secondary">3</button>
          <button type="button" class="btn btn-secondary">4</button>
        </div>

        <div class="btn-group mr-2" role="group" aria-label="Second group">
          <button type="button" class="btn btn-secondary">5</button>
          <button type="button" class="btn btn-secondary">6</button>
          <button type="button" class="btn btn-secondary">7</button>
        </div>
        
        <div class="btn-group" role="group" aria-label="Third group">
          <button type="button" class="btn btn-secondary">8</button>
        </div>
        
    </div>
  </div>
</div>

No es necesario confiar en envoltorios, o aplicar inline-block y tener que preocuparse por el espacio en blanco no deseado.

1
Robert 16 ene. 2018 a las 13:54
48282508