Bootstrap 4 - Guía rápida

¿Qué es Bootstrap 4?

Bootstrap 4 es un marco de interfaz de usuario móvil potente y popular para crear primeros sitios móviles receptivos en la web. Es una última versión de Bootstrap , que utiliza HTML, CSS y JavaScript.

Historia

La última versión estable de Bootstrap v3.3.7 fue en julio de 2016 y en agosto de 2017, se lanzó la versión beta de Bootstrap 4.0.0.

¿Por qué utilizar Bootstrap?

  • Contiene estilos móviles primero en toda la biblioteca, en lugar de usarlos en archivos separados.

  • Con solo el conocimiento de HTML y CSS, cualquiera puede comenzar con Bootstrap. Además, el sitio oficial de Bootstrap tiene una buena documentación.

  • Es compatible con todos los navegadores populares y su CSS sensible se ajusta a computadoras de escritorio, tabletas y móviles.

  • Proporciona una solución limpia y uniforme para crear una interfaz para desarrolladores.

  • Contiene componentes incorporados hermosos y funcionales que son fáciles de personalizar.

  • Es un código abierto y proporciona personalización basada en web.

Bootstrap 3 v / s Bootstrap 4

Bootstrap 4 es la última versión de Bootstrap 3, cuyos archivos CSS de origen se convierten en SCSS. Utiliza el modal flexible para el sistema de cuadrícula y es compatible con todos los navegadores más recientes. Sin embargo, es compatible con Internet Explorer 9+ e iOS 7+ y dejó de ser compatible con IE 8 y versiones inferiores, iOS 6 y versiones inferiores. Para obtener más información sobre la diferencia entre Bootstrap 3 y Bootstrap 4, consulte este capítulo .

Puede comenzar a usar Bootstrap 4 en su sitio web incluyéndolo desde CDN (Content Delivery Network) o descargándolo de getbootstrap.com .

Usando CDN

Bootstrap 4 se puede utilizar en el sitio web incluyéndolo desde Content Delivery Network .

Utilice el CDN de CSS y JS de Bootstrap compilado a continuación en su proyecto.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Incluya las versiones CDN de jQuery y Popper.js (Bootstrap 4 usa jQuery y Popper.js para hacer uso de componentes de JavaScript como modales, información sobre herramientas, popovers, etc.) antes del JavaScript minificado de Bootstrap , si está utilizando la versión compilada de JavaScript.

A continuación se muestran algunos componentes, que requieren jQuery:

  • Utilizado para alertas que se pueden cerrar

  • Cambie los estados usando botones y casillas de verificación / botones de radio y contraiga para alternar el contenido

  • Carrusel para diapositivas, controles e indicadores

  • Desplegables (utiliza Popper.js para un posicionamiento perfecto)

  • Abrir y cerrar Modals

  • Para colapsar la barra de navegación

  • Información sobre herramientas y ventanas emergentes (utiliza Popper.js para un posicionamiento perfecto)

Descargando Bootstrap 4

Puede descargar Bootstrap 4 desde https://getbootstrap.com/docs/4.1/getting-started/download/. Cuando haga clic en este enlace, verá una pantalla como se muestra a continuación:

Aquí puede ver dos botones:

  • Download- Al hacer clic aquí, puede descargar las versiones precompiladas y minimizadas de CSS y JavaScript de Bootstrap. No se incluye documentación ni archivos de código fuente original.

  • Download Source - Al hacer clic aquí, puede obtener los archivos de documentación y código fuente JavaScript más recientes de Bootstrap SCSS.

Para una mejor comprensión y facilidad de uso, usaremos la versión precompilada de Bootstrap a lo largo del tutorial. A medida que los archivos se compilan y minimizan, no tiene que preocuparse cada vez de incluir archivos separados para la funcionalidad individual.

Estructura de archivo

Bootstrap 4 precompilado

Una vez que se descargue la versión compilada de Bootstrap 4, extraiga el archivo ZIP y verá la siguiente estructura de archivo / directorio:

Como puede ver, hay CSS y JS compilados (bootstrap. *), Así como CSS y JS compilados y minificados (bootstrap.min. *).

Código fuente de Bootstrap 4

Si ha descargado el código fuente de Bootstrap 4, la estructura del archivo sería la siguiente:

  • Los archivos bajo js / y scss / son el código fuente de Bootstrap CSS y JavaScript.

  • La carpeta dist / incluye todo lo que se enumera en la sección de descarga precompilada anterior.

  • El docs / examples / , incluye código fuente para la documentación de Bootstrap y ejemplos de uso de Bootstrap.

Creación de la primera página web con Bootstrap 4

El siguiente ejemplo especifica una página web simple de Bootstrap 4:

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Bootstrap 4 usa clases de contenedor para envolver el contenido de la página. Contiene dos clases de contenedores:

  • .container - Representa un contenedor de ancho fijo.

  • .container-fluid - Representa un contenedor de ancho completo.

Envase

La clase .container se usa para envolver el contenido de la página con un ancho fijo y el contenido se puede colocar en el centro fácilmente usando la clase .container como se muestra a continuación.

<div class = "container">
   ...
</div>

Ejemplo

El siguiente ejemplo especifica una página web simple con un contenedor de ancho fijo:

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      <style>
         .container {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container">
         <h2>Fixed Width Container</h2>
         This is a simple web page with fixed width container by using 
         <code>.container</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Recipiente de fluido

Puede crear un contenedor de ancho completo utilizando la clase .container-fluid como se muestra a continuación.

<div class = "container-fluid">
   ...
</div>

El siguiente ejemplo especifica una página web simple con un contenedor de ancho completo:

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
       <style>
         .container-fluid {
            background: #a52c644a;
            text-align: center;
            padding-top: 100px;
            padding-bottom: 100px;
         }   
      </style>
   </head>
   
   <body>
      <div class = "container-fluid">
         <h2>Full Width Container</h2>
         This is a simple web page with full width container by using 
         <code>.container-fluid</code> class.
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity =" sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Descripción

Sistema de cuadrícula Bootstrap 4 construido con flexbox que es totalmente sensible y escala hasta 12 columnas (de acuerdo con el tamaño del dispositivo) al crear un diseño con filas y columnas en la página. Proporciona un primer sistema de cuadrícula de fluido móvil y receptivo que escala las columnas a medida que aumenta el tamaño del dispositivo o la ventana gráfica.

Funcionamiento del sistema de cuadrícula

  • Las filas deben colocarse dentro de una clase .container para lograr una alineación y un relleno adecuados.

  • Para un ancho receptivo, use la clase .container y para un ancho fijo en todas las ventanas, use la clase .container-fluid .

  • Utilice filas para crear grupos horizontales de columnas.

  • El contenido debe colocarse dentro de las columnas y solo las columnas pueden ser los hijos inmediatos de las filas.

  • Las columnas contienen relleno para controlar el espacio entre ellas.

  • Si coloca más de 12 columnas en una fila, las columnas se colocarán en una nueva línea.

  • Las columnas crean espacios entre el contenido de la columna mediante el relleno. Por lo tanto, puede eliminar el margen de las filas y el relleno de las columnas con la clase .no-gutters en la fila.

  • Puede hacer que el sistema de cuadrícula responda utilizando cinco puntos de interrupción de la cuadrícula, como extra pequeño, pequeño, mediano, grande y extra grande.

  • Las clases de cuadrícula predefinidas como .col-4 están disponibles para crear rápidamente diseños de cuadrícula. LESS mixins también se pueden utilizar para diseños más semánticos.

Opciones de cuadrícula

La siguiente tabla resume aspectos de cómo funciona el sistema de cuadrícula Bootstrap 4 en múltiples dispositivos:

Dispositivos extra pequeños (<576px) Dispositivos pequeños (≥576px) Dispositivos medianos (≥768px) Dispositivos grandes (≥992px) Dispositivos extra grandes (≥1200px)
Comportamiento de la cuadrícula Horizontal en todo momento Contraído al inicio, horizontal sobre los puntos de interrupción Contraído al inicio, horizontal sobre los puntos de interrupción Contraído al inicio, horizontal sobre los puntos de interrupción Contraído al inicio, horizontal sobre los puntos de interrupción
Ancho máximo del contenedor Ninguno (automático) 540 px 720px 960 px 1140px
Clases de clase .col- .col-sm- .col-md- .col-lg- .col-xl-
# de columnas 12 12 12 12 12
Ancho de canal

30px

(15px a cada lado de una columna)

30px

(15px a cada lado de una columna)

30px

(15px a cada lado de una columna)

30px

(15px a cada lado de una columna)

30px

(15px a cada lado de una columna)

Encajable si si si si si
Orden de columnas si si si si si

Estructura de cuadrícula básica

A continuación se muestra la estructura básica de la cuadrícula Bootstrap 4:

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>	  
   </div>
   
   <div class = "row">...</div>
</div>

Ejemplo de sistema de cuadrícula

A continuación se muestra un ejemplo del sistema de cuadrícula Bootstrap 4:

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
      </style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            background: #e4dcdc;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
      </style>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
            <div class = "col-sm-1">.col-sm-1</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class =" col-sm-3">.col-sm-3</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-5">.col-sm-5</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-12">.col-sm-12</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Crear diseños de dos columnas

El siguiente ejemplo describe la creación de diseños de dos columnas para dispositivos pequeños, medianos y grandes. En dispositivos pequeños, como teléfonos móviles, las columnas se convertirán automáticamente en horizontales de forma predeterminada.

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-6">.col-sm-6</div>
            <div class = "col-sm-6">.col-sm-6</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-7">.col-sm-7</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-8">.col-sm-8</div>
         </div>
		 
         <div class = "row">
            <div class = "col-sm-9">.col-sm-9</div>
            <div class = "col-sm-3">.col-sm-3</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Creación de diseños de tres columnas

El siguiente ejemplo describe la creación de diseños de tres columnas para dispositivos medianos y grandes. Si la resolución de la pantalla es mayor o igual a 992 píxeles, se mostrará en modo horizontal en tabletas y, como es habitual, se mostrará en modo vertical.

Ejemplo

<html lang = "en">
   <head>
      <!-- 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.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-4">.col-sm-4</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-4">.col-sm-4</div>
            <div class = "col-sm-5">.col-sm-5</div>
         </div>
         
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-8">.col-sm-8</div>
            <div class = "col-sm-2">.col-sm-2</div>
         </div>
		
         <div class = "row">
            <div class = "col-sm-2">.col-sm-2</div>
            <div class = "col-sm-3">.col-sm-3</div>
            <div class = "col-sm-7">.col-sm-7</div>
         </div>
      </div>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js" 
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Producirá el siguiente resultado:

Salida

Descripción

Bootstrap 4 utiliza una colección de métodos de contenido para mostrar el texto, bloques de código, imágenes receptivas, datos en formato tabular, etc. en la página web.

La siguiente tabla enumera los métodos de contenido que puede utilizar para manipular Bootstrap 4:

S.No. Métodos y descripción
1

Tipografía

La función de tipografía crea títulos, párrafos, listas y otros elementos en línea.

2

Código

Se utiliza para mostrar bloques de código en línea y de varias líneas en el documento.

3

Imagenes

Bootstrap 4 proporciona soporte para imágenes mediante la etiqueta <img>.

4

Mesas

Las tablas se utilizan para mostrar los datos en formato tabular.

5

Cifras

El elemento de figura especifica el contenido junto con imágenes relacionadas con un título opcional.

Descripción

Bootstrap 4 utiliza una colección de métodos de contenido para mostrar el texto, bloques de código, imágenes receptivas, datos en formato tabular, etc. en la página web.

La siguiente tabla enumera los métodos de contenido que puede utilizar para manipular Bootstrap 4:

S.No. Métodos y descripción
1

Alertas

El componente de alerta especifica el mensaje predefinido para las acciones del usuario.

2

Insignias

Las insignias se utilizan para resaltar la información adicional al contenido.

3

Migaja de pan

Se utiliza para mostrar información basada en jerarquías de un sitio.

4

Botones

Bootstrap proporciona un botón en el que se puede hacer clic para colocar contenido como texto e imágenes.

5

Grupo de botones

Los grupos de botones permiten apilar varios botones en una sola línea.

6

Tarjetas

La tarjeta es un contenedor de contenido que muestra un cuadro bordeado con algo de relleno alrededor.

7

Carrusel

Carrusel es una forma flexible y receptiva de agregar un control deslizante a su sitio.

8

Colapso

Se utiliza para mostrar u ocultar el contenido.

9

Listas deplegables

Los menús desplegables se pueden utilizar para mostrar enlaces en formato de lista.

10

Formularios

El elemento de formulario se utiliza para recopilar información del usuario.

11

Grupo de entrada

Con los grupos de entrada, puede anteponer y agregar fácilmente texto o botones a las entradas basadas en texto.

12

Jumbotron

Aumenta el tamaño de los encabezados y agrega mucho margen para el contenido de la página de destino.

13

Modal

Modal es una ventana secundaria que se coloca en capas sobre su ventana principal.

14

Navs

Bootstrap proporciona elementos de navegación para su sitio en un menú horizontal.

15

Barra de navegación

Navbar proporciona encabezados de navegación para su aplicación o sitio.

dieciséis

Paginación

La paginación se utiliza para dividir el contenido relacionado en varias páginas.

17

Popovers

Popover es similar a la información sobre herramientas, que ofrece una vista ampliada completa con un encabezado.

18

Progreso

La barra de progreso muestra el progreso de un proceso con barras apiladas, fondos animados y etiquetas de texto.

19

Scrollspy

Scrollspy se utiliza para indicar el enlace actualmente activo en el menú según la posición de desplazamiento.

20

Información sobre herramientas

La información sobre herramientas es útil cuando necesita describir un enlace.

Descripción

Bootstrap 4 utiliza una colección de utilidades para mostrar bordes, color de texto, incrustar video, etc.en la página web.

La siguiente tabla enumera los tipos de utilidades que puede utilizar para manipular Bootstrap 4:

S.No. Métodos y descripción
1

Fronteras

La utilidad Borde proporciona estilo, color y radio del borde de un elemento.

2

Clearfix y cerrar icono

Clearfix se utiliza para borrar el contenido flotante y cerrar el icono para descartar el contenido.

3

Colores

Utilice las clases contextuales para cambiar el color del texto, el enlace y el color de fondo de un elemento.

4

Empotrar

Se usa para incrustar el video en una página usando el elemento <iframe>.

5

Flotador

Se utiliza para hacer flotar un elemento hacia el lado izquierdo o derecho.

6

Sombras y espaciado

La utilidad Sombra agrega sombra a los elementos y la utilidad de espaciado proporciona valores de margen o relleno a un elemento.

7

Dimensionamiento

Puede hacer que el tamaño de un elemento sea ancho o alto utilizando las utilidades de ancho y alto.

8

Texto

Bootstrap proporciona utilidades de texto para controlar la alineación, transformación, peso y más del texto.

9

Flexionar

La utilidad Flex se puede utilizar para administrar el diseño, la alineación, las columnas de la cuadrícula, la navegación y otros componentes de la página.

Descripción

Bootstrap es un marco de interfaz de usuario móvil potente y popular para crear sitios web móviles con capacidad de respuesta en la web mediante el uso de marcos HTML, CSS y JS.

La siguiente tabla muestra las diferencias en Bootstrap 3 y Bootstrap 4 -

S.No. Componente Bootstrap 3 Bootstrap 4
1 Archivos fuente CSS MENOS SCSS
2 Sistema de red Sistema de cuadrícula de 4 niveles (xs, sm, md, lg) Sistema de cuadrícula de 5 niveles (xs, sm, md, lg, xl)
3 Unidad CSS px movimiento rápido del ojo
4 Tamaño de fuente 14px 16px
5 Estructura desplegable Creado con <ul> y <li> Creado con <ul> o <div>
6 Desplazamiento de columnas col-md-offset-4 offset-md-4
7 Imagenes .img-responsive class clase .img-fluid
8 Mesas Agregue la clase .table-responsive al elemento <div> principal Agregue la clase .table-responsive al elemento <table>
9 Glifos Soportado No soportado
10 Objetos multimedia Utiliza clases para objetos de medios, como .media , .media-body , .media-object , .media- header , .media-right , .media-left , .media-list y .media-body Utiliza solo la clase .media para objetos multimedia.
11 Tablas oscuras / inversas No soportado Usa la clase .table-dark para hacer tablas oscuras / inversas
12 Casillas de verificación y botones de opción Muestra las casillas de verificación y botones de radio mediante .Radio , .Radio-inline , .checkbox o .checkbox-inline clases Muestra las casillas de verificación y botones de radio mediante el uso de .Form-check , .Form-check-etiqueta , .Form-check-entrada , o .Form-check-inline clases
13 Tamaño de control de formulario Aumentar o disminuir el tamaño de de un control de entrada mediante el uso de .input-LG y .input-SM clases Aumentar o disminuir el tamaño de un control de entrada mediante el uso de .Form-control-lg y .Form-control-sm clases
14 texto de ayuda Muestra el texto de ayuda usando la clase .help-block Muestra el texto de ayuda usando la clase .form-text
15 Estilos Utiliza las clases .btn-default y .btn-info en los botones Utiliza las clases .btn-secundaria , .btn-light y .btn-dark en los botones y eliminó la clase .btn-default .
dieciséis Botones de contorno No soportado Diseñe los botones con el color del contorno usando .btn-outline- * class
17 Tamaños de botones La clase .btn-xs está disponible Disponible solo en las clases .btn-sm y .btn-lg y se eliminó la clase .btn-xs
18 Encabezados de menú Use la clase .dropdown-header para la etiqueta li Utilice la clase .dropdown-header para las etiquetas h1 - h2
19 Divisores Utilice la clase .divider en el elemento li Use la clase .dropdown-divider en el elemento div
20 Barras de navegación fijas Fijar la barra de navegación a la parte superior o inferior mediante el uso de .navbar-fija-top y de fondo .navbar-fijo clases Fijar la barra de navegación a la parte superior o inferior mediante el uso de .fixed-top y .fixed de fondo clases
21 Buscapersonas Alinear las páginas usando las clases .previous y .next No soportado
22 Jumbotron de ancho completo No usa la clase .jumbotron-fluid en jumbotrons de ancho completo Utiliza la clase .jumbotron-fluid para jumbotrons de ancho completo
23 Elemento de carrusel Utiliza la clase .item para elementos de carrusel. Utiliza la clase .carousel-item para elementos de carrusel.
24 Pozos, paneles y miniaturas Soportado No soportado. Utilice tarjetas en su lugar
25 Navs en línea No incluye la clase .nav-inline Muestre las navegaciones como en línea usando la clase .nav-inline