Las clases flexibles se utilizan para controlar el diseño de los componentes de flexbox.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Flex</h2> <div class="d-flex bg-success p-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> </div> </body> </html>
Producción:
Contenedor Flexbox en línea: la clase .d-inline-flex se usa para crear un contenedor Flexbox en línea.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Inline Flexbox</h2> <div class="d-inline-flex bg-success p-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> </div> </body> </html>
Producción:
Dirección horizontal: la clase .flex-row se usa para mostrar los elementos flexibles horizontalmente. Por defecto, los flexbox se colocan horizontalmente. La clase .flex-row-reverse se usa para invertir la alineación de flexbox (flexbox alineado a la derecha).
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Horizontal Flexbox</h2> <h3>flex-row class</h3> <div class="d-flex flex-row bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> <br> <h3>flex-row-reverse class</h3> <div class="d-flex flex-row-reverse bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> </div> </body> </html>
Producción:
Dirección vertical: la clase .flex-column se usa para mostrar el flexbox verticalmente (apilarse entre sí). La clase .flex-column-reverse se usa para poner el flexbox verticalmente en dirección inversa.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Vertical Flexbox</h2> <h3>flex-column class</h3> <div class="d-flex flex-column text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> <br> <h3>flex-column-reverse class</h3> <div class="d-flex flex-column-reverse text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> </div> </body> </html>
Producción:
Justificar contenido: las clases .justify-content-* se utilizan para cambiar la alineación de flexbox. La alineación de flexbox puede ser inicial, final, central, entre y alrededor.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Justify Content Flexbox </h2> <h5>justify-content-start class</h5> <div class="d-flex justify-content-start bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> <h5>justify-content-center class</h5> <div class="d-flex justify-content-center bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> <h5>justify-content-end class</h5> <div class="d-flex justify-content-end bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> <h5>justify-content-between class</h5> <div class="d-flex justify-content-between bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> <h5>justify-content-around class</h5> <div class="d-flex justify-content-around bg-success mb-3 text-white"> <div class="p-2 bg-primary">Flexbox 1</div> <div class="p-2 bg-secondary ">Flexbox 2</div> <div class="p-2 bg-info">Flexbox 3</div> </div> </div> </body> </html>
Producción:
Relleno/anchos iguales: la clase .flex-fill se usa para forzar los elementos flexibles en anchos iguales.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Fill/Equal Width Flexbox </h2> <div class="d-flex mb-3"> <div class="p-2 bg-primary flex-fill"> Flexbox 1 </div> <div class="p-2 bg-secondary flex-fill"> Flexbox 2 </div> <div class="p-2 bg-info flex-fill"> Flexbox 3 </div> </div> </div> </body> </html>
Producción:
Grow: La clase .flex-grow-1 se usa en flexbox para ocupar el resto del espacio.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Grow Flexbox </h2> <div class="d-flex mb-3"> <div class="p-2 bg-primary"> Flexbox 1 </div> <div class="p-2 flex-grow-1 bg-secondary"> Flexbox 2 </div> <div class="p-2 bg-success"> Flexbox 3 </div> </div> </div> </body> </html>
Producción:
Orden: La clase .order se usa para cambiar el orden de flexbox. Las clases de órdenes válidas
son de 0 a 12.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;"> Order Flexbox </h2> <div class="d-flex mb-3"> <div class="p-2 bg-primary order-3"> Flexbox 1 </div> <div class="p-2 bg-secondary order-1"> Flexbox 2 </div> <div class="p-2 bg-success order-2"> Flexbox 3 </div> </div> </div> </body> </html>
Producción:
Márgenes automáticos: las clases .mr- auto y .ml-auto se utilizan para agregar márgenes al elemento. La clase .mr- auto empuja el elemento hacia la derecha y la clase .ml-auto empuja el elemento hacia la izquierda.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Auto Margins</h2> <div class="d-flex bg-success mb-3 text-white"> <div class="p-2 bg-primary"> Flexbox 1 </div> <div class="p-2 mr-auto bg-secondary "> Flexbox 2 </div> <div class="p-2 mr-auto bg-info"> Flexbox 3 </div> </div> <div class="d-flex bg-success mb-3 text-white"> <div class="p-2 bg-primary"> Flexbox 1 </div> <div class="p-2 ml-auto bg-secondary "> Flexbox 2 </div> <div class="p-2 bg-info"> Flexbox 3 </div> </div> </div> </body> </html>
Producción:
Envoltura: las clases .flex-nowrap (predeterminado), .flex-wrap o .flex-wrap-reverse se utilizan para controlar la envoltura de elementos flexibles.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Flex Wrap</h2> <h4>flex-nowrap class</h4> <div class="d-flex flex-nowrap bg-success"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> <br><br> <h4>flex-wrap class</h4> <div class="d-flex flex-wrap bg-success"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> <br><br> <h4>flex-wrap-reverse class</h4> <div class="d-flex flex-wrap-reverse bg-success"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> </div> </body> </html>
Producción:
Alinear contenido: las clases .align-content-* se utilizan para establecer la alineación vertical de los elementos flexibles. La lista de todas las clases es: .align-content-start (predeterminado), .align-content-end , .align-content-center , .align-content- between , .align-content-around y .align-content- estirar _
Nota: El contenido de alineación funciona para más de una fila de elementos flexibles.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Align Content</h2> <h4>align-content-start class</h4> <div class="d-flex flex-wrap align-content-start border" style="height:250px"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> <br> <h4>align-content-around class</h4> <div class="d-flex flex-wrap align-content-around border" style="height:250px"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> <br> <h4>align-content-stretch class</h4> <div class="d-flex flex-wrap align-content-stretch border" style="height:250px"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> </div> </body> </html>
Producción:
Alinear elementos: las clases .align-items-* se utilizan para controlar la alineación vertical de los elementos flexibles. La lista de todas las clases es: .align-items-start , .align-items-end , .align-items-center , .align-items-baseline y .align-items-stretch (predeterminado).
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Align Items</h2> <h4>align-items-end class</h4> <div class="d-flex align-items-end border" style="height:150px"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> <br> <h4>align-items-baseline class</h4> <div class="d-flex align-items-baseline border" style="height:150px"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> <br> <h4>align-items-stretch class</h4> <div class="d-flex align-items-stretch border" style="height:150px"> <div class="p-2 border"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 4 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 5 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 6 </div> <div class="p-2 border"> Welcome to GeeksforGeeks 7 </div> </div> </div> </body> </html>
Producción:
Align Self: las clases .align-self-* se utilizan para controlar la alineación vertical de los elementos flexibles. La lista de todas las clases es: .align-self-start , .align-self-end , .align-self-center , .align-self-baseline y .align-self-stretch (predeterminado).
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Flex</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body> <div class="container mt-3"> <h1 style="color:green; text-align:center;"> GeeksforGeeks </h1> <h2 style="text-align:center;">Align Self</h2> <h4>align-items-end class</h4> <div class="d-flex" style="height:250px"> <div class="p-2 border align-self-start"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border align-self-center"> Welcome to GeeksforGeeks 2 </div> <div class="p-2 border align-self-end"> Welcome to GeeksforGeeks 3 </div> <div class="p-2 border align-self-baseline"> Welcome to GeeksforGeeks 1 </div> <div class="p-2 border align-self-stretch"> Welcome to GeeksforGeeks 2 </div> </div> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA