Podemos modificar los espacios en booststrap 4 de ese modo podemos jugar con nuestros elementos aun más para lograr maquetaciones mucho más interesantes y flexibles.

w y h (ancho y alto)

W hace referencia al ancho y nos permite usar los valores 25, 50, 75 y 100 en porcentajes.

Por su parte h funciona igual pero en vertical, tomando valores de 25, 50 75 y 100.

De este modo podemos utilizarlos juntos o por separado tal y como vemos en el siguiente ejemplo:

<div class="row h-25 w-75">
	<div >
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
		tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
		quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
		consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
		cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
		proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</div>
</div>

Cuyo resultado es:

Algo que tiene muchísimas posibilidades a la hora de trabajar y que abre nuestras posibilidades a la hora de maquetar sin necesidad de utilizar CSS

p y m (padding y margin)

Bootstrap 4 nos permite utilizar el padding y el margin de forma muy sencilla desde sus propias clases, algo que nos hará acelerar el tiempo de desarrollo sin ninguna duda.

Para ello podemos usar también el lado al que queremos afectar, por medio de:

• t: top
• b: bottom
• l: left
• r: right
• x: para left y right
• y: para top y bottom

Además hay que añadir el tamaño del espacio que toma valores entre 0 y 5 según la siguiente lista

• 0 para eliminar el margin o el padding
• 1 (por defecto) para clases que multiplican el espaciador * 0.25
• 2 (por defecto) para clases que multiplican el espaciador * 0.5
• 3 (por defecto) para clases que multiplican el espaciador * 1, es decir que deja el espacio igual
• 4 (por defecto) para clases que multiplican el espaciador * 1.5
• 5 (por defecto) para clases que multiplican el espaciador * 3
• auto : para clases que queremos que tengan el margen en auto

El espaciador depende de cada elemento de bootstrap pero se pueden generar más modificando las variables Sass.

De este modo podemos hacer ejemplos del tipo:

• mt-4: que afecta al margen superior multiplicando el espacio * 1.5
• p-2: que afecta a todos los paddings * 0.5
• mb-1 p-5: afecta al margen superior multiplicando * 0.25 y a todos los paddings multiplicando el espaciador *3

Con esto ganamos muchísimo en cuanto vamos cogiendo algo de soltura.