Hacer un centrado con Bootstrap

Question

La cosa es que quiero centrar 3 elementos ('Select', es parecido al ComboBox) y por más que he intentado no consigo que el código centre a la perfección dichos elementos, Mi código es el siguiente:

<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Módulo de Ventas</title>

<!-- CSS -->
<link href="css/bootstrap.css" rel="stylesheet">`introducir el código aquí`
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>

        body{
            background-color: cadetblue;
        }

    </style>    
</head>
<body>


<div class="container">
<br>
<header>
        <nav class="navbar-default navbar-fixed-top navbar-inverse">
            <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                    <span class="sr-only">Menu</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>

                </button>
                <a href="#" class="navbar-brand">Logo-Play 4 Fun</a>
            </div>

                <div class="collapse navbar-collapse" id="navbar-1">
                    <ul class="nav navbar-nav">
                        <li><a class="" href="">Producto</a></li>
                        <li><a href="">Compra</a></li>
                        <li><a href="active">Venta</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</div>
<br>
<br>
<br>
<br>

<h2 class="text-center">Módulo de Ventas</h2>
<div class="container">
    <div class="row">
        <div class="col-sm-12 col-s-4">
    <select class="custom-select" id="cmbClientes">
  <option selected>Clientes Existentes de la Base de Datos</option>
  <option value="1">Cliente Uno</option>
  <option value="2">Cliente Dos</option>
  <option value="3">Cliente Tres</option>
    </select>
    <select class="custom-select" id="cmbEmpleados">
  <option selected>Empleados Existentes de la Base de Datos</option>
  <option value="1">Empleado Uno</option>
  <option value="2">Empleado Dos</option>
  <option value="3">Empleado Tres</option>
    </select>
    <select class="custom-select" id="cmbProductos">
  <option selected>Productos Existenes de la Base de Datos</option>
  <option value="1">Producto Uno</option>
  <option value="2">Producto Dos</option>
  <option value="3">Producto Tres</option>
    </select>
    </div>
    </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- JS -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>

Revisa tu código por que al pasarlo al snippet no carga los estilos de bootstrap ! — Bender Paisa, Nov 21 '17 at 02:59
Es que los alojé en una carpeta css de mi proyecto, no sé si esto influye — Antonio Labra, Nov 21 '17 at 03:01
Ya te lo organicé, ahora quieres centras los 3 elementos en línea o quieres que cada uno queda debajo del otro? — Bender Paisa, Nov 21 '17 at 03:03
Quiero que el contenido esté centrado y que cuando llegue a tamaños más pequeños se pongan uno sobre el otro (como en el código que puse) — Antonio Labra, Nov 21 '17 at 03:05
En [esta](https://es.stackoverflow.com/a/115924/47499) pregunta trato de explicar detalladamente como funciona el sistema de cuadrícula de Bootstrap (Grid System). Espero te sirva. — alexchvrches, Nov 21 '17 at 04:27

score 0 · Accepted Answer · answered Nov 21 '17 at 03:15

Para lograr lo que quieres con Bootstrap es cuestión de seguir una estructura de etiquetas <div> y agregar las clases necesarias del Grid System:

<!DOCTYPE html>
<html lang="es-MX">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Módulo de Ventas</title>

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<style>
    body{
        background-color: cadetblue;
    }
</style>    
</head>
<body>

<div class="container">
<br>
    <header>
        <nav class="navbar-default navbar-fixed-top navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-1">
                        <span class="sr-only">Menu</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>

                    </button>
                    <a href="#" class="navbar-brand">Logo-Play 4 Fun</a>
                </div>

                <div class="collapse navbar-collapse" id="navbar-1">
                    <ul class="nav navbar-nav">
                        <li><a class="" href="">Producto</a></li>
                        <li><a href="">Compra</a></li>
                        <li><a href="active">Venta</a></li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
</div>
<br>
<br>
<br>
<br>

<h2 class="text-center">Módulo de Ventas</h2>
<div class="container">
    <div class="row">
        <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-12">
            <div class="form-group">
                <select class="form-control" id="cmbClientes">
                    <option selected>Clientes Existentes de la Base de Datos</option>
                    <option value="1">Cliente Uno</option>
                    <option value="2">Cliente Dos</option>
                    <option value="3">Cliente Tres</option>
                </select>
            </div>
        </div>
        <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-12">
            <div class="form-group">
                <select class="form-control" id="cmbEmpleados">
                    <option selected>Empleados Existentes de la Base de Datos</option>
                    <option value="1">Empleado Uno</option>
                    <option value="2">Empleado Dos</option>
                    <option value="3">Empleado Tres</option>
                </select>
            </div>
        </div>
        <div class="col-lg-4 col-lg-offset-0 col-md-4 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-12">
            <div class="form-group">
                <select class="form-control" id="cmbProductos">
                    <option selected>Productos Existenes de la Base de Datos</option>
                    <option value="1">Producto Uno</option>
                    <option value="2">Producto Dos</option>
                    <option value="3">Producto Tres</option>
                </select>
            </div>
        </div>
    </div>
</div>

<br>
<br>
<br>
<br>
<br>
<br>
<br>

</body>
</html>

NOTA: no es necesario usar etiquetas <br> para generar espacio, ¿Por que mejor no utilizar los margin-top o margin-bottom?

Te agradezco enormemente hermano, estoy armando un sitio en HTML y no se casi nada de Bootstrap. En verdad, gracias por tu tiempo y por compartir tu conocimiento — Antonio Labra, Nov 21 '17 at 03:21
Para eso estamos @AntonioLabra , te invito a que marques la respuesta como aceptada para que futuros desarrolladores sepan que fue la respuesta correcta ante tu problema, además te invito a que hagas el [tour] y entiendas el funcionamiento básico del sitio, saludos ! — Bender Paisa, Nov 21 '17 at 03:23
@AntonioLabra así como comentas, utilizar el **Grid System** de Bootstrap es la manera adecuada de organizar el contenido; sin embargo cuando una columna no necesita moverse a la derecha en cierto tamaño de pantalla, ya sea `col-lg-*`, `col-md-*`, `col-sm-*`, `col-xs-*`, no se necesita utilizar la clase `col-lg-offset-*`, por ejemplo. — alexchvrches, Nov 21 '17 at 04:25

score 0 · Answer 2 · answered Nov 21 '17 at 03:19

Este es un ejemplo que te ayudará con el tema de centrar los componentes en bootstrap. Debes utilizar las clases: justify-content-center, form-group y form-control como se muestra en el codigo.

<div class="container">
    <div class="row justify-content-center mt-5 pt-5">
        <div class="col-md-7">
            <h1 class="display-4">Formulario</h1>
            <form id="formulario">
                <div class="row form-group">
                    <label for="clientes" class="col-form-label col-md-4">Select:</label>
                    <div class="col-md-8">
                        <select id="clientes" class="custom-select form-control" id="cmbClientes">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Hacer un centrado con Bootstrap

2 Answers2