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