Contenedores en Bootstrap con ejemplos

En bootstrap, el contenedor se usa para establecer el margen del contenido. Contiene elementos de fila y los elementos de fila son contenedores de columnas. Esto se conoce como el sistema de rejilla. 
Hay dos clases de contenedores en bootstrap:  

  1. .envase
  2. .contenedor-fluido

Veamos cada una de las dos clases anteriores en detalle con ejemplos:

.container : la clase .container proporciona un contenedor de ancho fijo que responde.
En el siguiente ejemplo, el div con clase «contenedor» tendrá un margen izquierdo y derecho fijo y no ocupará el ancho completo de su padre o la ventana gráfica.

HTML

<!-- Bootstrap container class -->
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Container Example</title>
    <!-- Add Bootstrap Links -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <!-- Since we are using the class container, the below
        div will not take complete width of its parent. -->
    <div class="container" style="background: green;">
        <h1>GeeksforGeeks</h1>
         
<p>A computer science portal for geeks.</p>
 
    </div>
</body>
</html>

Salida :

.container-fluid : la clase .container-fluid proporciona un contenedor de ancho completo que abarca todo el ancho de la ventana gráfica.
En el siguiente ejemplo, el div con clase «contenedor-fluido» ocupará todo el ancho de la ventana gráfica y se expandirá o reducirá cada vez que se cambie el tamaño de la ventana gráfica. 

HTML

<!-- Bootstrap container-fluid class -->
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Container Example</title>
    <!-- Add Bootstrap Links -->
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
    </script>
</head>
<body>
    <!-- Since we are using the class container-fluid, the
        below div will expand whenever the viewport is resized. -->
    <div class="container-fluid" style="background: green;">
        <h1>GeeksforGeeks</h1>
         
<p>A computer science portal for geeks.</p>
 
    </div>
</body>
</html>

Salida :

Navegador compatible:

  • Google Chrome
  • explorador de Internet
  • Firefox
  • Ópera
  • Safari

Publicación traducida automáticamente

Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *