Flexbox en Bootstrap 4: de bootstrap 3 a bootstrap 4 se ha producido un cambio sorprendente que bootstrap 4 puede utilizar flexbox para manejar el diseño del contenido. a
Enfoque: coloque la dirección de los elementos flexibles en un contenedor flexible con utilidades de dirección. En la mayoría de los casos, podrá excluir la clase horizontal ya que el valor predeterminado del navegador es una fila. En cualquier caso, experimentará circunstancias en las que necesite establecer explícitamente esta estimación (como diseños receptivos).
Los siguientes ejemplos representan diferentes formas de colocar elementos uno debajo del otro en un Flex-Box.
Ejemplo 1: Usar . clase flex-column para colocar elementos uno debajo del otro.
<div class="d-flex flex-column"></div>
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"> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <div class="d-flex flex-column bd-highlight mb-3"> <div class="p-2 bd-highlight">Content 1</div> <div class="p-2 bd-highlight">Content 2</div> <div class="p-2 bd-highlight">Content 3</div> </div> </center> </body> </html>
Producción:
Ejemplo 2: también puede usar la clase .flex-column-reverse para colocar elementos uno debajo del otro en orden inverso. Mostrando flex-box en orden inverso.
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"> <title>flexbox | bootstrap4</title> </head> <body> <center> <h1 style="color: green">GeeksforGeeks</h1> <div class="d-flex flex-column-reverse bd-highlight mb-3"> <div class="p-2 bd-highlight">Content 1</div> <div class="p-2 bd-highlight">Content 2</div> <div class="p-2 bd-highlight">Content 3</div> </div> </center> </body> </html>
Producción:
Ejemplo 3: Usando flex-direction: column; y alinear elementos: centro; puede colocar elementos uno debajo del otro en el centro. Por lo tanto, como se muestra a continuación, podemos colocar íconos o imágenes uno debajo del otro usando flexbox en bootstrap 4.
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>flexbox | bootstrap4</title>
<style type="text/css">
.my_content {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.my_options {
border: 1px solid green;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<center>
<h1 style="color: green">GeeksforGeeks</h1>
</center>
<div class="my_content">
<div class="my_options col-xs-6">
<div><i class="fa fa-hand-o-down fa-2x"
aria-hidden="true"></i></div>
<h3> fa-hand-o-down</h3>
</div>
<div class="my_options col-xs-6">
<div><i class="fa fa-hand-o-left fa-2x"
aria-hidden="true"></i></div>
<h3> fa-hand-o-left</h3>
</div>
<div class="my_options col-xs-6">
<div><i class="fa fa-hand-o-right fa-2x"
aria-hidden="true"></i></div>
<h3> fa-hand-o-right</h3>
</div>
<div class="my_options col-xs-6">
<div><i class="fa fa-hand-o-up fa-2x"
aria-hidden="true"></i></div>
<h3> fa-hand-o-up</h3>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA