La propiedad de visualización en Bootstrap se usa para establecer la propiedad de visualización de un elemento. Las utilidades como bloque, en línea, etc. son para establecer la propiedad de visualización del elemento.
Las clases de propiedades de visualización de bootstrap ayudan a establecer directamente la propiedad de visualización de CSS para un elemento.
Las clases disponibles son:
- .d-block : esta clase, cuando se usa con un elemento, establece su propiedad de visualización en block . Usar esta clase con un elemento es equivalente al siguiente estilo:
style = "display: block;"
- .d-inline : esta clase, cuando se usa con un elemento, establece su propiedad de visualización en línea . Usar esta clase con un elemento es equivalente al siguiente estilo:
style = "display: inline;"
- .d-inline-block : esta clase, cuando se usa con un elemento, establece su propiedad de visualización en inline-block . Usar esta clase con un elemento es equivalente al siguiente estilo:
style = "display: inline-block;"
Sintaxis:
- <div class=”d-inline”> Inline </div> // para visualización en línea
- <div class=”d-block”> Bloque </div> // para visualización de bloques
- <div class=”d-inline-block”> Inline Block </div> // para visualización de bloque en línea
Los siguientes ejemplos ilustran el uso de las clases de propiedades de visualización de bootstrap:
Ejemplo 1:
<!DOCTYPE html>
<html>
<head>
<style>
div{ font-size: 30px; }
</style>
<!-- Include Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>Webpage</title>
</head>
<body>
<div class="d-block bg-primary">
GeeksforGeeks
</div>
<div class="d-block bg-primary">
GeeksforGeeks
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<style>
div{ font-size: 30px; }
</style>
<!-- Add Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Webpage</title>
</head>
<body>
<div class="d-inline bg-success">
GeeksforGeeks
</div>
<div class="d-inline bg-success">
GeeksforGeeks
</div>
</body>
</html>
Producción:
Ejemplo 3:
<!DOCTYPE html>
<html>
<head>
<style>
body{ font-size: 75px; }
</style>
<!-- Add Bootstrap CSS and JS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<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>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<title>Webpage</title>
</head>
<body>
<div class="d-inline-block bg-warning">
GeeksforGeeks
</div>
<div class="d-inline-block bg-warning">
GeeksforGeeks
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por chaitanyashah707 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA