¿Cómo usar Bootstrap para alinear etiquetas con contenido en 4 columnas?

El motivo de este artículo es alinear el contenido en cuatro columnas donde las dos primeras columnas denotan las etiquetas y su contenido y las dos últimas columnas denotan las etiquetas y su contenido. Las clases «fila» y «col» se utilizan para crear una cuadrícula que se puede representar mediante varias filas y columnas. La clase «fila» crea una fila en la que se colocará el contenido y la clase «col» crea particiones en esa fila dejando espacio para que se coloquen 4 etiquetas o 4 elementos en esa fila.
Este ejemplo usa Bootstrap para crear cuatro columnas donde las dos primeras columnas representan las etiquetas y su contenido y las dos últimas columnas representan las etiquetas y su contenido.
Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>
        How to use Bootstrap to align labels
        with content into 4 columns ?
    </title>
      
    <link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href=
"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  
    <style>
        form {
            margin-top: 30px;
            margin-bottom: 30px;
            padding-bottom: 25px;
        }
        .form-area {
            margin-top: 30px;
        }
        label {
            display: block;
            color: black;
            font-weight: bold;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <hr>
    <form>
        <div class="row">
            <div class="col">
  
                <div class="row">
                    <div class="col">
                        <label>HTML</label>
                    </div>
                    <div class="col">
                        <p>
                            Learn to Design your First
                            Website in Just 1 Week
                        </p>
                    </div>
                </div>
  
                <div class="row">
                    <div class="col">
                        <label>CSS</label>
                    </div>
                    <div class="col">
                        <p>
                            Cascading Style Sheets, fondly
                            referred to as CSS
                        </p>
                    </div>
                </div>
  
                <div class="row">
                    <div class="col">
                        <label>JavaScript</label>
                    </div>
                    <div class="col">
                        <p>JavaScript Tutorials</p>
                    </div>
                </div>
  
            </div>
  
            <div class="col">
                <div class="row">
                    <div class="col">
                        <label>Front-end</label>
                    </div>
                    <div class="col">
                        <p style="font-weight: italic; color: grey">
                            “Front End” typically refers to all the 
                            kinds of stuff that the user actually sees 
                            on the website, once it loads completely. 
                            This is why it is also called the “client-side”
                            of the front-end.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
  
</html>                    

Producción:

Publicación traducida automáticamente

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