Bootstrap 4 Utilitas

Bootstrap 4 memiliki banyak kelas utilitas/pembantu untuk menata elemen dengan cepat tanpa menggunakan kode CSS apa pun.

perbatasan

Gunakan borderkelas untuk menambah atau menghapus batas dari elemen:

Contoh

Warna Perbatasan

Tambahkan warna ke perbatasan dengan salah satu kelas warna perbatasan kontekstual:

Contoh

Radius Perbatasan

Tambahkan sudut membulat ke elemen dengan roundedkelas:

Contoh

Float dan Clearfix

Float elemen ke kanan dengan .float-rightkelas atau ke kiri dengan .float-left, dan hapus float dengan .clearfixkelas:

Contoh

Float left Float right

Contoh

<div class="clearfix">
<span class="float-left">Float left</span>
<span class="float-right">Float right</span>
</div>

Float Responsif

Mengambang elemen ke kiri atau ke kanan tergantung pada lebar layar, dengan kelas float responsif ( .float-*-left|right- di mana * adalah sm(>=576px), md(>=768px), lg(>=992px) atau xl(>=1200px)):

Contoh

Float right on small screens or wider

Float right on medium screens or wider

Float right on large screens or wider

Float right on extra large screens or wider

Float none

Contoh

<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or wider</div><br>
<div class="float-none">Float none</div>

Rata tengah

Pusatkan elemen dengan .mx-autokelas (menambahkan margin-kiri dan margin-kanan: otomatis):

Contoh

Centered

Contoh

<div class="mx-auto bg-warning" style="width:150px">Centered</div>

Lebar

Atur lebar elemen dengan kelas w-* ( .w-25, .w-50, .w-75, .w-100, .mw-100):

Contoh

Width 25%

Width 50%

Width 75%

Width 100%

Max Width 100%

Contoh

<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width 50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>

Tinggi

Atur tinggi elemen dengan kelas h-* ( .h-25, .h-50, .h-75, .h-100, .mh-100):

Contoh

Height 25%

Height 50%

Height 75%

Height 100%

Max Height 100%

Contoh

<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height 50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning" style="height:500px">Max Height 100%</div>
</div>

Jarak

Bootstrap 4 memiliki berbagai macam margin responsif dan kelas utilitas padding. Mereka bekerja untuk semua titik henti sementara: xs(<=576px), sm(>=576px), md(>=768px), lg(>=992px) atau xl(>=1200px)):

Kelas digunakan dalam format: {property}{sides}-{size}untuk xsdan {property}{sides}-{breakpoint}-{size}untuk sm, md, lg, dan xl.

Dimana properti adalah salah satu dari:

m - set margin
p - set padding

Dimana sisi adalah salah satu dari:

t- set margin-topataupadding-top
b- set margin-bottomataupadding-bottom
l- set margin-leftataupadding-left
r- set margin-rightataupadding-right
x- set keduanya padding-leftdan padding-rightatau margin-leftdanmargin-right
y- set keduanya padding-topdan padding-bottomatau margin-topdanmargin-bottom
kosong - set a marginatau paddingdi semua 4 sisi elemen

Dimana ukuran adalah salah satu dari:

0- set marginatau paddingke0
1- set marginatau paddingke .25rem(4px jika ukuran font 16px)
2- set marginatau paddingke .5rem(8px jika ukuran font adalah 16px)
3- set marginatau paddingke 1rem(16px jika ukuran font 16px)
4- set marginatau paddingke 1.5rem(24px jika ukuran font 16px)
5- set marginatau paddingke 3rem(48px jika ukuran font 16px)
auto- disetel marginke otomatis

Catatan: margin juga bisa negatif, dengan menambahkan "n" di depan size :

n1- set marginke -.25rem(-4px jika ukuran font adalah 16px)
n2- set marginke -.5rem(-8px jika ukuran font adalah 16px)
n3- set marginke -1rem(-16px jika ukuran font adalah 16px)
n4- set marginke -1.5rem(-24px jika ukuran font adalah 16px)
n5- set marginke -3rem(-48px jika ukuran font adalah 16px)

Contoh

I only have a top padding (1.5rem = 24px)

I have a padding on all sides (3rem = 48px)

I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)

Contoh

<div class="pt-4 bg-warning">I only have a top padding (1.5rem = 24px)</div>
<div class="p-5 bg-success">I have a padding on all sides (3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>

Contoh Spasi Lainnya

`.m-# / m-*-#`	margin di semua sisi
`.mt-# / mt-*-#`	margin atas
`.mb-# / mb-*-#`	margin bawah
`.ml-# / ml-*-#`	margin kiri
`.mr-# / mr-*-#`	margin kanan
`.mx-# / mx-*-#`	margin kiri dan kanan
`.my-# / my-*-#`	margin atas dan bawah
`.p-# / p-*-#`	bantalan di semua sisi
`.pt-# / pt-*-#`	bantalan atas
`.pb-# / pb-*-#`	bantalan bawah
`.pl-# / pl-*-#`	bantalan kiri
`.pr-# / pr-*-#`	bantalan kanan
`.py-# / py-*-#`	bantalan atas dan bawah
`.px-# / px-*-#`	bantalan kiri dan kanan

Bayangan

Gunakan shadow-kelas untuk menambahkan bayangan ke elemen:

Contoh

No shadow

Small shadow

Default shadow

Large shadow

Contoh

<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div class="shadow-sm p-4 mb-4 bg-white">Small shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large shadow</div>

Perataan Vertikal

Gunakan align-kelas untuk mengubah perataan elemen (hanya berfungsi pada elemen sel sebaris, blok sebaris, tabel sebaris, dan sel tabel):

Contoh

baseline top middle bottom text-top text-bottom

Contoh

<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

Sematan Responsif

Buat video responsif atau tayangan slide berdasarkan lebar induknya.

Tambahkan .embed-responsive-itemke elemen sematan (seperti <iframe> atau <video>) di elemen induk dengan .embed-responsivedan rasio aspek pilihan Anda:

Contoh

<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>


<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>

Visibilitas

Gunakan kelas .visibleatau .invisibleuntuk mengontrol visibilitas elemen. Catatan: Kelas-kelas ini tidak mengubah nilai tampilan CSS. Mereka hanya menambahkan visibility:visibleatau visibility:hidden:

Contoh

I am visible

I am invisible

Contoh

<div class="visible">I am visible</div>
<div class="invisible">I am invisible</div>

Posisi

Gunakan .fixed-topkelas untuk membuat elemen apa pun tetap/tetap di bagian atas halaman:

Contoh

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

Example

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).

Example

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:

Example

Screenreaders

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

Example

<span class="sr-only">I will be hidden on all screens except for screen readers.</span>

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:

Example

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

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

Example

Muted link. Primary link. Success link. Info link. Warning link. Danger link. Secondary link. Dark grey link. Body/black link. Light grey link.

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

Example

Black text with 50% opacity on white background

White text with 50% opacity on black background

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.

Example

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.

Typography/Text Classes

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

Class	Description	Example
`.display-*`	Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight), and there are four classes to choose from: `.display-1`, `.display-2`, `.display-3`, `.display-4`
`.font-weight-bold`	Bold text
`.font-weight-bolder`	Bolder bold text
`.font-weight-normal`	Normal text
`.font-weight-light`	Light weight text
`.font-weight-lighter`	Lighter weight text
`.font-italic`	Italic text
`.lead`	Makes a paragraph stand out
`.small`	Indicates smaller text (set to 85% of the size of the parent)
`.text-break`	Prevents long text from breaking layout
`.text-center`	Indicates center-aligned text
`.text-decoration-none`	Removes the underline from a link
`.text-left`	Indicates left-aligned text
`.text-justify`	Indicates justified text
`.text-monospace`	Monospaced text
`.text-nowrap`	Indicates no wrap text
`.text-lowercase`	Indicates lowercased text
`.text-reset`	Resets the color of a text or a link (inherits the color from its parent)
`.text-right`	Indicates right-aligned text
`.text-uppercase`	Indicates uppercased text
`.text-capitalize`	Indicates capitalized text
`.initialism`	Displays the text inside an `<abbr>` element in a slightly smaller font size
`.list-unstyled`	Removes the default list-style and left margin on list items (works on both `<ul>` and `<ol>`). This class only applies to immediate children list items (to remove the default list-style from any nested lists, apply this class to any nested lists as well)
`.list-inline`	Places all list items on a single line (used together with `.list-inline-item` on each <li> elements)
`.pre-scrollable`	Makes a `<pre>` element scrollable

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:

Example

d-block d-sm-block d-md-block d-lg-block d-xl-block

Example

<span class="d-block bg-success">d-block</span>
<span class="d-sm-block bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span class="d-xl-block bg-success">d-xl-block</span>

Other Display Classes

Other display classes are also available:

Class	Description	Example
`.d-none`	Hides an element
`.d-*-none`	Hides an element on a specific screen size
`.d-inline`	Makes an element inline
`.d-*-inline`	Makes an element inline on a specific screen size
`.d-inline-block`	Makes an element inline block
`.d-*-inline-block`	Makes an element inline block on a specific screen size
`.d-table`	Makes an element display as a table
`.d-*-table`	Makes an element display as a table on a specific screen size
`.d-table-cell`	Makes an element display as a table cell
`.d-*-table-cell`	Makes an element display as a table cell on a specific screen size
`.d-table-row`	Makes an element display as a table row
`.d-*-table-row`	Makes an element display as a table row on a specific screen size
`.d-flex`	Creates a flexbox container and transforms direct children into flex items
`.d-*-flex`	Creates a flexbox container on a specific screen size
`.d-inline-flex`	Creates an inline flexbox container
`.d-*-inline-flex`	Creates an inline flexbox container on a specific screen size

Flex

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

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

Example

Horizontal:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Vertical:

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

❮ Previous Next ❯

Tutorial Bootstrap 4

Bootstrap 4 Grid

Bootstrap 4 Lainnya

Bootstrap 4 Referensi

Bootstrap 4 Utilitas