utility در بوت استرپ | کلاس های کمکی bootstrap

کلاس کمکی (utility) چیست؟

در بوت استرپ کلاس هایی از قبل تعریف شده است که به شما کمک می کند تا بدون استفاده از هیچ کد CSS ای بتوانید عناصر را سریعا استایل دهی کنید. به این کلاس ها، کلاس های کمکی (utility/helper classes) می گوییم. از آنجا که لیست این کلاس ها بسیار طولانی هستند آن ها را در دو مقاله به شما ارائه خواهیم کرد.

border ها

برای اضافه کردن یا حذف کردن border ها از همین کلاس استفاده کنید! به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  .border {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Borders</h2>
  <p>Use the border classes to add or remove borders from an element:</p> 
  <span class="border"></span>
  <span class="border border-0"></span>
  <span class="border border-top-0"></span>
  <span class="border border-right-0"></span>
  <span class="border border-bottom-0"></span>
  <span class="border border-left-0"></span>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

همانطور که می بینید با اضافه کردن کلاس border، یک حاشیه به عنصر اضافه می شود و با قرار دادن عدد صفر کنار آن همان حاشیه حذف می شود.

حالا باید رنگ border ها را مشخص کنیم. برای مشخص کردن رنگ border ها می توانید از رنگ های بوت استرپ (در قسمت های قبلی چندین بار اشاره شده است مانند این مقاله) استفاده کنید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  .border {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Borders</h2>
  <p>Use a contextual border color to add a color to the border:</p> 
  <span class="border border-primary"></span>
  <span class="border border-secondary"></span>
  <span class="border border-success"></span>
  <span class="border border-danger"></span>
  <span class="border border-warning"></span>
  <span class="border border-info"></span>
  <span class="border border-light"></span>
  <span class="border border-dark"></span>
  <span class="border border-white"></span>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

اضافه کردن Border Radius (گِرد کردن گوشه ها)

برای ایجاد border radius باید از کلاس rounded استفاده کنید و پسوند مورد نظر خود را به آن اضافه کنید. به طور مثال sm مخفف small (کوچک) و lg مخفف large (بزرگ) است. در مثال زیر این کلاس را به همراه پسوند هایش می بینید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  span {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 6px;
    background-color: #555;
  }
  </style>
</head>
<body>

<div class="container">
  <h2>Borders</h2>
  <p>Round the corner of an element with the rounded classes:</p> 
  <span class="rounded-sm"></span>
  <span class="rounded"></span>
  <span class="rounded-lg"></span>
  <span class="rounded-top"></span>
  <span class="rounded-right"></span>
  <span class="rounded-bottom"></span>
  <span class="rounded-left"></span>
  <span class="rounded-circle"></span>
  <span class="rounded-0"></span>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مبحث float و Clearfix

در این مسئله بوت استرپ و CSS تفاوت چندانی ندارند، تنها تفاوت آنجاست که بوت استرپ از کلاس های از پیش تعریف شده استفاده می‌کند؛ اگر می خواهید عنصری را به سمت راست ببرید از کلاس float-right.، اگر می خواهید عنصری را به سمت چپ ببرید از کلاس float-left. و اگر می خواهید از clearfix استفاده کنید باید کلاس clearfix. را اضافه کنید. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Float</h2>
  <p>Float an element to the right with the .float-right class or to the left with .float-left, and clear floats with the .clearfix class.</p> 
  <div class="clearfix">
    <span class="float-left">Float left</span>
    <span class="float-right">Float right</span>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

استفاده از float های واکنش گرا

بوت استرپ با استفاده از قالب کلی float-*-left|right. به شما اجازه می دهد که بر اساس سایز صفحه عنصری را به راست یا چپ float کنید! برای این کار باید به جای علامت ستاره (*) در قالب کلی از sm برای صفحاتی با عرض مساوی یا بیشتر از 576px و md برای مساوی یا بیشتر از 768px و lg برای مساوی یا بیشتر از 992px و xl برای مساوی یا بیشتر از 1200px استفاده کنید. با مطالعه و تغییر سایز مثال زیر کاملا متوجه این موضوع خواهید شد:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Responsive Floats</h2>
  <p>Float an element to the left or to the right depending on screen width, with the responsive float classes .float-*-left|right (where * is sm, md, lg or xl).</p>
  <p>Resize the browser window to see the effect.</p> 
  <div class="clearfix">
    <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>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

قرار گیری عنصر در وسط صفحه

برای قرار دادن عنصر در وسط یک صفحه می توانید از کلاس mx-auto. استفاده کنید. این کلاس margin-left و margin-right را برابر auto قرار می دهد:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Horizontal Centering</h1>
  <p>Center an element with the .mx-auto class:</p>
  <div class="mx-auto bg-warning" style="width:150px">Centered</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تعیین عرض عناصر

بوت استرپ کلاس های خاصی برای تعیین عرض عناصر صفحه دارد. برای تعیین عرض عناصر باید از قالب کلی *-w پیروی کنید؛ یعنی به جای ستاره یکی از اعداد 25 یا 50 یا 75 یا 100 یا mw-100 را انتخاب کنید. این موارد در مثال زیر مشخص شده اند:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Width Utilities</h1>
  <p>Set the width of an element with the w-* classes:</p>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

نکته: تفاوت w-100 و mw-100 در این است که w مخفف width و mw مخفف max-width است بنابراین اگر برای عنصری از mw استفاده کنید ممکن است عرضش کوچک تر شود (بیشترین مقدارش 100 خواهد بود، نه ثابت و فقط 100) اما 100-w یعنی فقط و فقط عرض 100 را قرار بده.

تعیین ارتفاع عناصر

همان چیزی که برای عرض عناصر گفتیم برای ارتفاع آن ها نیز صادق است منتهی باید از قالب کلی *-h استفاده کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Height Utilities</h1>
  <p>Set the height of an element with the w-* classes:</p>
  <div style="height:200px;background-color:#ddd">
    <div class="h-25 d-inline-block p-2 bg-warning">Height 25%</div>
    <div class="h-50 d-inline-block p-2 bg-warning">Height 50%</div>
    <div class="h-75 d-inline-block p-2 bg-warning">Height 75%</div>
    <div class="h-100 d-inline-block p-2 bg-warning">Height 100%</div>
    <div class="mh-100 d-inline-block p-2 bg-warning" style="height:500px">Max Height 100%</div>
  </div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

ایجاد فضای خالی (spacing)

منظور از spacing همان مقادیر margin و padding است که باعث ایجاد فضای خالی بین عناصر یا درون عناصر می شود. بوت استرپ 4 کلاس های margin و padding متعدد و واکنش گرا دارد که breakpoint (نقاط شکست) آن ها بدین صورت است:

xs یعنی extra small (بسیار کوچک): 576px و کمتر
sm یعنی small (کوچک): 576px و بیشتر
md یعنی medium (متوسط): 768px و بیشتر
lg یعنی large (بزرگ): 992px و بیشتر
xl یعنی extra large (بسیار بزرگ): 1200px و بیشتر

اگر بخواهیم از این کلاس ها استفاده کنیم باید به این شکل عمل کنیم: برای استفاده از کلاس xs باید بر اساس دستور کلی {property}{sides}-{size} پیش برویم اما برای استفاده از بقیه ی کلاس ها باید بر اساس دستور کلی {property}{sides}-{breakpoint}-{size} پیروی کنیم.

در دستورات کلی بالا مقدار property باید یکی از مقادیر زیر باشد:

m (برای تعیین margin)
p (برای تعیین padding)

مقدار sides نیز باید یکی از گزینه های زیر باشد:

t برای تعیین margin-top یا padding-top
b برای تعیین margin-bottom یا padding-bottom
l برای تعیین margin-left یا padding-left
r برای تعیین margin-right یا padding-right
x برای تعیین هر دو خصوصیت padding-left و padding-right یا خصوصیت های margin-left یا margin-right
y برای تعیین هر دو خصوصیت padding-top و padding-bottom یا خصوصیت های margin-top یا margin-bottom
خالی قرار دادن این مقدرا برای تعیین margin یا padding در هر چهار طرف عنصر

مقدار size نیز محدود به همین چند گزینه است:

0 مقدار margin یا padding را 0 قرار می دهد.
1 مقدار margin یا padding را 25rem. قرار می دهد (یعنی 4px به شرطی که font-size برابر 16px باشد)
2 مقدار margin یا padding را 5rem. قرار می دهد (یعنی 8px به شرطی که font-size برابر 16px باشد)
3 مقدار margin یا padding را 1rem قرار می دهد (یعنی 16px به شرطی که font-size برابر 16px باشد)
4 مقدار margin یا padding را 1.5rem قرار می دهد (یعنی 24px به شرطی که font-size برابر 16px باشد)
5 مقدار margin یا padding را 3rem قرار می دهد (یعنی 48px به شرطی که font-size برابر 16px باشد)
auto مقدار margin را برابر auto قرار می دهد.

نکته: اگر می خواهید margin هایتان منفی باشند کافیست حرف n را قبل از اندازه قرار دهید:

n1 مقدار margin را 25rem.- قرار می دهد (یعنی 4px- به شرطی که font-size برابر 16px باشد)
n2 مقدار margin را 5rem.- قرار می دهد (یعنی 8px- به شرطی که font-size برابر 16px باشد)
n3 مقدار margin را 1rem- قرار می دهد (یعنی 16px- به شرطی که font-size برابر 16px باشد)
n4 مقدار margin را 1.5rem- قرار می دهد (یعنی 24px- به شرطی که font-size برابر 16px باشد)
n5 مقدار margin را 3rem- قرار می دهد (یعنی 48px- به شرطی که font-size برابر 16px باشد)

به مثال زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Spacing Utilities</h1>
  <p>Set the spacing of an element with the {property}{sides}-{breakpoint}-{size} classes. Omit breakpoint if you want the padding or margin to work on all screen sizes.</p>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

مثال های بیشتر:

هر چهار طرف margin می گیرند	`.m-# / m-*-#`
قسمت بالا margin می گیرد	`.mt-# / mt-*-#`
قسمت پایین margin می گیرد	`.mb-# / mb-*-#`
سمت چپ margin می گیرد	`.ml-# / ml-*-#`
سمت راست margin می گیرد	`.mr-# / mr-*-#`
سمت راست و چپ margin می گیرد	`.mx-# / mx-*-#`
سمت بالا و پایین margin می گیرد	`.my-# / my-*-#`
هر چهار طرف padding می گیرند	`.p-# / p-*-#`
قسمت بالا padding می گیرد	`.pt-# / pt-*-#`
قسمت پایین padding می گیرد	`.pb-# / pb-*-#`
سمت چپ padding می گیرد	`.pl-# / pl-*-#`
سمت راست padding می گیرد	`.pr-# / pr-*-#`
سمت راست و چپ padding می گیرد	`.py-# / py-*-#`
سمت بالا و پایین padding می گیرد	`.px-# / px-*-#`

یک مثال برای margin چپ و راست از این جدول:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Margin Left and Right Utilities</h1>
  <p>Margin X utilities:</p>
  <div class="mx-0 bg-warning">Margin X 0</div>
  <div class="mx-1 bg-warning">Margin X 1</div>
  <div class="mx-2 bg-warning">Margin X 2</div>
  <div class="mx-3 bg-warning">Margin X 3</div>
  <div class="mx-4 bg-warning">Margin X 4</div>
  <div class="mx-5 bg-warning">Margin X 5</div>
  <div class="mx-auto bg-warning" style="width:150px">Margin X Auto</div>
  <br>
  
  <p>Responsive margin x utilities. Resize the browser window to see the effect:</p>
  <div class="mx-sm-5 bg-warning">Margin X 5 on SM screens</div>
  <div class="mx-md-5 bg-warning">Margin X 5 on MD screens</div>
  <div class="mx-lg-5 bg-warning">Margin X 5 on LG screens</div>
  <div class="mx-xl-5 bg-warning">Margin X 5 on XL screens</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

و یک مثال دیگر برای padding بالا و پایین:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Padding Top and Bottom Utilities</h1>
  <p>Padding y utilities:</p>
  <div class="py-0 bg-warning">Padding Y 0</div>
  <div class="py-1 bg-success">Padding Y 1</div>
  <div class="py-2 bg-danger">Padding Y 2</div>
  <div class="py-3 bg-primary">Padding Y 3</div>
  <div class="py-4 bg-light">Padding Y 4</div>
  <div class="py-5 bg-info">Padding Y 5</div>
  <br>

  <p>Responsive padding y utilities. Resize the browser window to see the effect:</p>
  <div class="py-sm-5 bg-warning">Padding Y 5 on SM screens</div>
  <div class="py-md-5 bg-success">Padding Y 5 on MD screens</div>
  <div class="py-lg-5 bg-danger">Padding Y 5 on LG screens</div>
  <div class="py-xl-5 bg-primary">Padding Y 5 on XL screens</div>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

سایه ها

برای اضافه کردن سایه باید از دستور کلی -shadow استفاده کنید. به مثال زیر دقت کنید:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Shadows</h1>
  <p>Use the shadow- classes to to add shadows to an element:</p>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

تراز عمودی عناصر

برای ترازبندی عمودی عناصر باید از دستور کلی و قالب -align استفاده کنید. توجه داشته باشید که این کلاس تنها روی عناصر inline و inline-block و جداولی که inline باشند کار خواهد کرد و در غیر این صورت جواب نخواهد داد. مثال:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Vertical Align</h1>
  <p>Change the alignment of elements with the align classes (only works on inline, inline-block, inline-table and table cell elements):</p>
  <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>
</div>

</body>
</html>

مشاهده ی خروجی در JSBin

این عناصر متنی هستند، بنابراین بر اساس baseline خودشان ترازبندی می شوند.

امیدوارم از این قسمت لذت برده باشید. در قسمت بعد به بررسی کلاس های کمکی بیشتری خواهیم پرداخت.