Do a centering with Bootstrap

Navigation
0

The thing is that I want to center 3 elements ('Select', it's similar to the ComboBox) and as much as I tried, I do not get the code to perfectly center these elements. My code is as follows: 

<!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>
    
asked by Antonio Labra 21.11.2017 в 03:53
source

2 answers

0

To achieve what you want with Bootstrap it's a matter of following a tag structure <div> and adding the necessary classes of the 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>

NOTE: It is not necessary to use <br> tags to generate space, why not use the margin-top or margin-bottom ?

    
answered by 21.11.2017 / 04:15
source
0
  

This is an example that will help you with the theme of centering the components in bootstrap. You must use the classes: justify-content-center, form-group and form-control as shown in the code. 

<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>
    
answered by 21.11.2017 в 04:19
Run django application on xampp server Do not stop AJAX requests when reloading page