¿Qué es el contenedor Bootstrap?

Los contenedores Bootstrap son el elemento de diseño más básico en Bootstrap. Los contenedores Bootstrap son bloques de construcción muy esenciales y básicos de bootstrap que envuelven el contenido de una página. Es responsable de configurar y alinear el contenido dentro de él según la ventana gráfica o el dispositivo dado. Los contenedores se definen dentro de la clase de contenedor (.container) . En otras palabras, podemos decir que los contenedores se establecen el ancho de la disposición para dar el contenido. Los elementos y el contenido se agregan dentro del contenedor.

Los contenedores se utilizan para muchos propósitos, tales como:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class="container" 
        style="background-color: yellow;">
          
        <h1>Default-Container</h1>
          
        <p>
            This is the example of 
            container in bootstrap
        </p>
    </div>
</body>
  
</html>

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class=" container container-sm" 
        style="background-color: green;">
          
        <h1>Responsive-Container</h1>
          
        <p>
            This is the example of 
            container in bootstrap
        </p>
    </div>
</body>
  
</html>

HTML

<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
    </script>
</head>
  
<body>
    <div class=" container-fluid" 
        style="background-color: blue;">
          
        <h1>Fluid-Container</h1>
          
        <p>
            This is the example of 
            container in bootstrap
        </p>
    </div>
</body>
  
</html>

Publicación traducida automáticamente

Artículo escrito por khushiguptakhushi02 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 *