¿Cómo crear un contenedor de ancho completo usando bootstrap?

Podemos crear un contenedor de ancho completo usando la clase de arranque «contenedor fluido»

Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios cuando se utiliza nuestro sistema de cuadrícula predeterminado. Elija entre un contenedor receptivo de ancho fijo (lo que significa que su ancho máximo cambia en cada punto de interrupción) o ancho fluido (lo que significa que es 100% ancho todo el tiempo). La clase container-fluid se puede usar para obtener un contenedor de ancho completo.

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.

Método:

Básicamente tenemos que crear un <div></div> (no es necesario que sea un div pero es mejor si usamos div) al que tenemos que darle una clase container-fluid(o container depende del ancho) y poner todo el texto dentro de ese div que queremos que esté colectivamente en un contenedor

Sintaxis:

  • .container- cambios de ancho máximo en cada punto de interrupción

<div class=”container”> <!– Contenido aquí –> </div>

  • .container-fluid- 100% ancho
<div class="container-fluid">

        <!-- Content here -->

  </div>

Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
    <script src=
"https://kit.fontawesome.com/577845f6a5.js"
        crossorigin="anonymous">
    </script>
    <title>Use of class container</title>
    <style type="text/css">
        .bottom-left {
            left: 0;
        }
    </style>
</head>
<body>
    <!--class container: max-width
             changes at each breakpoint
       All the text is pushed inside a container-->
    <div class="container">
        <!--class jumbotron: to highlight
               how the class container works-->
        <div class="jumbotron">
            <h1 style="color: #006400;">
                GeeksforGeeks
            </h1>
            <div>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"
                    height="150">
            </div>
            <div class="position-relative"
                style="color: green;">
                <h1>Hey There..!!</h1>
                 
<p><b>This is an Example..</b></p>
 
                 
<p>
                    Here I have used class container
                    of bootstrap to put
                    everything inside a container.
                </p>
 
                <br/>
            </div>
            <div class="position-relative">
                <div class="position-absolute bottom-left">
                    <button type="button"
                        class="btn btn-success">
                        Click me!
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

imagen que muestra un contenedor de clase

Aquí, el contenedor de clase se usa dentro de la etiqueta div superior para confinar todo el texto dentro de un contenedor cuyo ancho es fijo

Ejemplo: 

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,
            initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
    <script src=
"https://kit.fontawesome.com/577845f6a5.js"
        crossorigin="anonymous">
    </script>
    <title>Use of class container-fluid</title>
    <style type="text/css">
        .bottom-left {
            left: 0;
        }
    </style>
</head>
<body>
    <!--class container-fluid: 100% width-->
    <div class="container-fluid">
        <!--class jumbotron: to highlight
              how the class container works-->
        <div class="jumbotron">
            <h1 style="color: #006400;">
                GeeksforGeeks
            </h1>
            <div>
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200712114621/testimg.JPG"
                    height="150">
            </div>
            <div class="position-relative"
                style="color: green;">
                <h1>Hey There..!!</h1>
                 
<p><b>This is an Example..</b></p>
 
                 
<p>
                    Here I have used class
                    container-fluid of bootstrap
                    to put everything inside a
                    container.
                </p>
 
                <br/>
            </div>
            <div class="position-relative">
                <div class="position-absolute bottom-left">
                    <button type="button"
                        class="btn btn-success">
                        Click me!
                    </button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Producción:

imagen que muestra la clase container-fluid

Aquí la clase container-fluid se usa para confinar todo el texto en un contenedor cuyo ancho es el 10% de la pantalla

Publicación traducida automáticamente

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