Bootstrap 4- hulpprogramma's

Bootstrap 4-hulpprogramma's

Bootstrap 4 heeft veel hulpprogramma-/helperklassen om snel elementen te stylen zonder CSS-code te gebruiken.

grenzen

Gebruik de borderklassen om randen aan een element toe te voegen of te verwijderen:

Rand kleur

Voeg een kleur toe aan de rand met een van de contextuele randkleurklassen:

Grensstraal

Voeg afgeronde hoeken toe aan een element met de roundedklassen:

Float en Clearfix

Zweef een element naar rechts met de .float-rightklasse of naar links met .float-left, en verwijder floats met de .clearfixklasse:

Responsieve floats

Laat een element naar links of naar rechts zweven, afhankelijk van de schermbreedte, met de responsieve float-klassen ( .float-*-left|right- waar * is sm(>=576px), md(>=768px), lg(>=992px) of xl(>=1200px)):

Uitlijnen in het midden

Centreer een element met de .mx-autoklasse (voegt marge-links en marge-rechts toe: auto):

Breedte

Stel de breedte van een element in met de w-* klassen ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Hoogte

Stel de hoogte van een element in met de h-* klassen ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Spatiëring

Bootstrap 4 heeft een breed scala aan responsieve marge- en opvulhulpklassen. Ze werken voor alle breekpunten: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) of xl(>=1200px)):

De klassen worden gebruikt in het formaat: {property}{sides}-{size}voor xsen {property}{sides}-{breakpoint}-{size}voor sm, md, lg, en xl.

Waar eigendom is een van:

• m- setsmargin
• p- setspadding

Waar zijden een van is:

• t- sets margin-topofpadding-top
• b- sets margin-bottomofpadding-bottom
• l- sets margin-leftofpadding-left
• r- sets margin-rightofpadding-right
• x- stelt zowel padding-leften padding-rightof margin-leften inmargin-right
• y- stelt zowel padding-topen padding-bottomof margin-topen inmargin-bottom
• blanco - stelt een marginof paddingin op alle 4 zijden van het element

Waar de maat een is van:

• 0- sets marginof paddingto0
• 1- sets marginof paddingto .25rem(4px als de lettergrootte 16px is)
• 2- sets marginof paddingto .5rem(8px als de lettergrootte 16px is)
• 3- sets marginof paddingto 1rem(16px als de lettergrootte 16px is)
• 4- sets marginof paddingto 1.5rem(24px als de lettergrootte 16px is)
• 5- sets marginof paddingto 3rem(48px als de lettergrootte 16px is)
• auto- zet marginop automatisch

Let op: marges kunnen ook negatief zijn, door een "n" voor size toe te voegen :

• n1- wordt ingesteld marginop -.25rem(-4px als de lettergrootte 16px is)
• n2- wordt ingesteld marginop -.5rem(-8px als de lettergrootte 16px is)
• n3- wordt ingesteld marginop -1rem(-16px als de lettergrootte 16px is)
• n4- wordt ingesteld marginop -1.5rem(-24px als de lettergrootte 16px is)
• n5- wordt ingesteld marginop -3rem(-48px als de lettergrootte 16px is)

Meer ruimtevoorbeelden

schaduwen

Gebruik de shadow-klassen om schaduwen aan een element toe te voegen:

Verticaal uitlijnen

Gebruik de align-klassen om de uitlijning van elementen te wijzigen (werkt alleen op inline-, inline-block-, inline-table- en tabelcelelementen):

Responsieve insluitingen

Maak responsieve insluitingen voor video's of diavoorstellingen op basis van de breedte van de ouder.

Voeg de .embed-responsive-itemtoe aan alle ingesloten elementen (zoals <iframe> of <video>) in een bovenliggend element met .embed-responsiveen een beeldverhouding naar keuze:

Zichtbaarheid

Gebruik de klassen .visibleof .invisibleom de zichtbaarheid van elementen te regelen. Opmerking: deze klassen veranderen de CSS-weergavewaarde niet. Ze voegen alleen visibility:visibleof toe visibility:hidden:

Positie

Gebruik de .fixed-topklasse om elk element vast te maken / bovenaan de pagina te blijven:

Use the .fixed-bottom class to make any element fixed/stay at the bottom of the page:

Use the .sticky-top class to make any element fixed/stay at the top of the page when you scroll past it. Note: This class does not work in IE11 and earlier (will treat it as position:relative).

Close icon

Use the .close class to style a close icon. This is often used for alerts and modals. Note that we use the × symbol to create the actual icon (a better looking "x"). Also note that it floats right by default:

Screenreaders

Use the .sr-only class to hide an element on all devices, except screen readers:

Colors

As described in the Colors chapter, here is a list of all text and background color classes:

The classes for text colors are: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (default body color/often black) and .text-light:

Contextual text classes can also be used on links, which will add a darker hover color:

You can also add 50% opacity for black or white text with the .text-black-50 or .text-white-50 classes:

Background Colors

The classes for background colors are: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Note that background colors do not set the text color, so in some cases you'll want to use them together with a .text-* class.

Typography/Text Classes

As described in the Typography chapter, here is a list of all typography/text classes:

Block Elements

To make an element into a block element, add the .d-block class. Use any of the d-*-block classes to control WHEN the element should be a block element on a specific screen width:

Other Display Classes

Other display classes are also available:

Flex

Use .flex-* classes to control the layout with flexbox.

Read more about Bootstrap 4 Flex, in our next chapter.