Dimensionamiento

Cree fácilmente un elemento tan ancho o tan alto con nuestras utilidades de ancho y alto.

Relativo al padre

Las utilidades de ancho y alto se generan a partir del $sizes mapa Sass en formato _variables.scss . Incluye soporte para 25% , 50% , 75% , 100% , y auto por defecto. Modifique esos valores ya que necesita generar diferentes utilidades aquí.

Ancho 25%

Ancho 50%

Ancho 75%

Ancho 100%

Ancho automático

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>

Height 25%

Height 50%

Height 75%

Height 100%

Height auto

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>

También puede utilizar max-width: 100%; y max-height: 100%; utilidades según sea necesario.

<img src="..." class="mw-100" alt="...">

Altura máxima 100%

<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>

Relativo a la ventana gráfica

También puede utilizar las utilidades para establecer el ancho y el alto en relación con la ventana gráfica.

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

tamaño del contenedor

También puede utilizar las utilidades para establecer el ancho y el alto en relación con el contenedor padre de algun elemento. Entonces el elemento tomara el tamaño ocupando todo el alto y ancho restante

<div class="vh-100">
  <nav >
  </nav>
  <div  class="height-100" >
  </div>
</div>

Otros tamaños de alto

<div class="vh-5">Height 5vh</div>
<div class="vh-10">Height 10vh</div>
<div class="vh-15">Height 15vh</div>
<div class="vh-16">Height 16vh</div>
<div class="vh-20">Height 20vh</div>
<div class="vh-25">Height 25vh</div>
<div class="vh-30">Height 30vh</div>
<div class="vh-35">Height 35vh</div>
<div class="vh-40">Height 40vh</div>
<div class="vh-45">Height 45vh</div>
<div class="vh-50">Height 50vh</div>
<div class="vh-55">Height 55vh</div>
<div class="vh-60">Height 60vh</div>
<div class="vh-65">Height 65vh</div>
<div class="vh-70">Height 70vh</div>
<div class="vh-75">Height 75vh</div>
<div class="vh-80">Height 80vh</div>
<div class="vh-85">Height 85vh</div>
<div class="vh-90">Height 90vh</div>
<div class="vh-95">Height 95vh</div>
 -- 
<div class="min-vh-5">Min-height 5vh</div>
<div class="min-vh-10">Min-height 10vh</div>
<div class="min-vh-15">Min-height 15vh</div>
<div class="min-vh-16">Min-height 16vh</div>
<div class="min-vh-20">Min-height 20vh</div>
<div class="min-vh-25">Min-height 25vh</div>
<div class="min-vh-30">Min-height 30vh</div>
<div class="min-vh-35">Min-height 35vh</div>
<div class="min-vh-40">Min-height 40vh</div>
<div class="min-vh-45">Min-height 45vh</div>
<div class="min-vh-50">Min-height 50vh</div>
<div class="min-vh-55">Min-height 55vh</div>
<div class="min-vh-60">Min-height 60vh</div>
<div class="min-vh-65">Min-height 65vh</div>
<div class="min-vh-70">Min-height 70vh</div>
<div class="min-vh-75">Min-height 75vh</div>
<div class="min-vh-80">Min-height 80vh</div>
<div class="min-vh-85">Min-height 85vh</div>
<div class="min-vh-90">Min-height 90vh</div>
<div class="min-vh-95">Min-height 95vh</div>

Otros tamaños de alto para min-height en Pixeles.

<div class="min-vh-px-5">Min-height 96px</div>

Espacio de cabecera

La siguiente clase: navbar-height reserva un espacio arriba del contenedor del navbar.

<div class="navbar-height">
  <nav >
  </nav>
</div>

La siguiente clase: body-home toma en cuenta el espacio del Navbar y toma el espacio restante del contenedor del home.

<Navbar />
<div class="row m-0">
  <div class="col-12 body-home">
  </div>
</div>

Espacio de cabecera y botonera

La siguiente clase: body-wizard-height reserva un espacio arriba del contenedor del navbar y abajo de la botonera de Wizard.

<div class="body-wizard-height">
</div>

.body-wizard-height {
  height: calc(100% - 138.97px);
}

La siguiente clase: body-wizard-min-height reserva un espacio arriba del contenedor del navbar para el cuerpo del Wizard, esta clase se usa cuando no se tiene botonera

<div class="height-section-text-fixed">
</div>

.body-wizard-min-height {
  height: calc(100% - 63.97px);
}

La siguiente clase: height-section-text-fixed calcula el alto de una seccion del wizard tomando en cuenta el NAVBAR, LA BOTONERA, LA BARRA DE PROGRESO DEL WIZARD y un PARRAFO fijado con espacio de 4 lineas.

<div class="body-wizard-height">
</div>

.height-section-text-fixed {
  height: calc(100% - 395px);
}

La siguiente clase: height-section-container-fixed define un espacio para mostrar el contenido de un wizard en un espacio determinado. Esto para reservar un espacio fijo en la parte inferior de la pagina(bottom)

<div class="height-section-container-fixed">
</div>

La siguiente clase: height-section-container-authorize define un contenedor para mostrar un contenedor de la sección de información crediticia

<div class="height-section-container-authorize">
</div>

La siguiente clase: height-section-content-authorize define un espacio para mostrar el contenido de las descripción de información crediticia

<div class="height-section-content-authorize">
</div>

Imágenes con tamaños

Algunas ilustraciones que usan la clase img-fluid requieren utilizar un minimo de ancho o alto, para las siguientes ilustraciones se requieren utilizar esta clase ya que se pretende que la imagen no sea mas pequeña de lo establecido por la clase.

<img class="img-fluid min-width-coin-img" />

Espacio Superior

Si desea colocar espacio en la parte superior de 20px

<div class="spacing-top">...</div>
// Class
.spacing-top {
    top: 20px !important;
}