Bootstrap text/typography

Colors

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


The classes for text colors are: , , , , , , , , , (default body color/often black) and :

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:

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 or classes:

Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Dropdown button Link 1 Link 2 Link 3

Example

<div class=»dropdown»>  <button type=»button» class=»btn btn-primary dropdown-toggle» data-toggle=»dropdown»>    Dropdown button  </button>  <div class=»dropdown-menu»>    <a class=»dropdown-item» href=»#»>Link 1</a>    <a class=»dropdown-item» href=»#»>Link 2</a>    <a class=»dropdown-item» href=»#»>Link 3</a>  </div></div>

Example Explained

The class indicates a dropdown menu.

To open the dropdown menu, use a button or a link with a class of and the attribute.

Add the class to a element to actually build the dropdown menu. Then add the class to each element (links or buttons) inside the dropdown menu.

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

II. Классы и компоненты

глава третья

Оформление контента

  • Оформление и работа с текстом
  • Стилизация HTML списков
  • Средства Bootstrap для оформления изображений
  • Оформление HTML таблиц
  • CSS для HTML элемента figure
  • Классы платформы для HTML форм
  • Примеры оформления форм
  • Вспомогательные классы
  • Оформление заголовков

глава четвёртая

Компоненты

  • Breadcrumb (навигационные цепочки, хлебные крошки)
  • Collapse и создание на базе него аккордеона
  • Dropdowns (выпадающие списки)
  • Jumbotron (оформление ключевой информации)
  • Modal (модальные окна для веб-страницы)
  • Navs (навигационные блоки)
  • Navbar (основное меню сайта)
  • Panels (Bootstrap 3 панели)
  • Popovers (всплывающие панели)
  • Scrollspy (выделение ссылок на основании положения прокрутки)
  • Tabs (Bootstrap 3 вкладки)
  • Thumbnails (Bootstrap 3 галерея)
  • Alerts (сообщения)
  • Badges (бейджи)
  • Buttons (кнопки)
  • Carousel (карусель)
  • Pagination (навигационный блок для пагинации)
  • Progress (индикаторы выполнения)
  • Tooltips (всплывающие подсказки)

только для Bootstrap 3

  • Иконки Glyphicons
  • Affix (sticky-позиционирование элементов)

только для Bootstrap 4

  • Card (карточка)
  • Spinners (Спиннеры)
  • Navbar (основное меню)

глава пятая

Классы помощники

  • Управление отображением элементов (Bootstrap 4)
  • Классы для работы с flexbox (Bootstrap 4)
  • Управление margin и padding отступами (Bootstrap 4)
  • Управление границами и скруглениями углов элементов (Bootstrap 4)

Collapsing The Navigation Bar

  • Link
  • Link
  • Link

Very often, especially on small screens, you want to hide the navigation links and replace them with a button that should reveal them when clicked on.

To create a collapsible navigation bar, use a button with . Then wrap the navbar content (links, etc) inside a div element with , followed by an id that matches the of the button: «thetarget».

Example

<nav class=»navbar navbar-expand-md bg-dark navbar-dark»>  <!— Brand —>  <a class=»navbar-brand» href=»#»>Navbar</a>  <!— Toggler/collapsibe Button —>  <button class=»navbar-toggler» type=»button» data-toggle=»collapse» data-target=»#collapsibleNavbar»>    <span class=»navbar-toggler-icon»></span>  </button>  <!— Navbar links —>  <div class=»collapse navbar-collapse» id=»collapsibleNavbar»>    <ul class=»navbar-nav»>      <li class=»nav-item»>        <a class=»nav-link» href=»#»>Link</a>      </li>      <li class=»nav-item»>        <a class=»nav-link» href=»#»>Link</a>      </li>      <li class=»nav-item»>        <a class=»nav-link» href=»#»>Link</a>      </li>     </ul>  </div> </nav>

Tip: You can also remove the .navbar-expand-md class to ALWAYS hide navbar links and display the toggler button.

Примеры Попробуйте сами


Этот учебник Bootstrap 4 содержит сотни примеров Bootstrap 4.

С помощью нашего онлайн-редактора вы можете отредактировать код и, нажав на кнопку, сразу просмотреть результат.

Bootstrap 4 Пример

<div class=»jumbotron text-center»>  <h1>Моя первая Bootstrap страница</h1>  <p>Измените размер этой адаптивной страницы, чтобы увидеть эффект!</p> </div><div class=»container»>  <div class=»row»>     <div class=»col-sm-4″>      <h3>Столбец 1</h3>      <p>Lorem ipsum dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Столбец 2</h3>      <p>Lorem ipsum dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Столбец 3</h3>       <p>Lorem ipsum dolor..</p>    </div>  </div></div>

Нажмите на кнопку «Попробуйте сами» чтобы увидеть, как это работает.

Bootstrap 4 CDN

If you don’t want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).

MaxCDN provides CDN support for Bootstrap’s CSS and JavaScript. You must also include jQuery:

MaxCDN:

<!— Latest compiled and minified CSS —><link rel=»stylesheet» href=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css»><!— jQuery library —><script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script> <!— Popper JS —><script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script><!— Latest compiled JavaScript —><script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script>

One advantage of using the Bootstrap 4 CDN: Many users already have downloaded Bootstrap 4 from MaxCDN when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN’s will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.jQuery and Popper?Bootstrap 4 use jQuery and Popper.js for JavaScript components (like modals, tooltips, popovers etc). However, if you just use the CSS part of Bootstrap, you don’t need them.

Show components that require jQuery »

  • Closable alerts
  • Buttons and checkboxes/radio buttons for toggling states
  • Carousel for slides, controls, and indicators
  • Collapse for toggling content
  • Dropdowns (also requires Popper.js for perfect positioning)
  • Modals (open and close)
  • Navbar (for collapsible menus)
  • Tooltips and popovers (also requires Popper.js for perfect positioning)
  • Scrollspy for scroll behavior and navigation updates

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Pills with Dropdown

  • Active
  • Dropdown

    Link 1 Link 2 Link 3

  • Link
  • Disabled

Example

<ul class=»nav nav-pills»>  <li class=»nav-item»>    <a class=»nav-link active» href=»#»>Active</a>  </li>  <li class=»nav-item dropdown»>    <a class=»nav-link dropdown-toggle» data-toggle=»dropdown» href=»#»>Dropdown</a>    <div class=»dropdown-menu»>      <a class=»dropdown-item» href=»#»>Link 1</a>      <a class=»dropdown-item» href=»#»>Link 2</a>      <a class=»dropdown-item» href=»#»>Link 3</a>    </div>  </li>  <li class=»nav-item»>    <a class=»nav-link» href=»#»>Link</a>  </li>  <li class=»nav-item»>    <a class=»nav-link disabled» href=»#»>Disabled</a>  </li></ul>

Responsive Flex Classes

All flex classes comes with additional responsive classes, which makes it easy to set a specific flex class on a specific screen size.

The symbol can be replaced with sm, md, lg or xl, which represents small, medium, large or xlarge screens.

Class Description Example
Flex Container    
Creates a flexbox container for different screens Try it
Creates an inline flexbox container for different screens Try it
Direction    
Display flex items horizontally on different screens Try it
Display flex items horizontally, and right-aligned, on different screens Try it
Display flex items vertically on different screens Try it
Display flex items vertically, with reversed order, on different screens screens Try it
Justified Content    
Display flex items from the start (left-aligned) on different screens Try it
Display flex items at the end (right-aligned) on different screens Try it
Display flex items in the center of a flex container on different screens Try it
Display flex items in «between» on different screens Try it
Display flex items «around» on different screens Try it
Fill / Equal Width    
Force flex items into equal widths on different screens Try it
Grow    
Don’t make the items grow on different screens  
Make items grow on different screens  
Shrink    
Don’t make the items shrink on diferent screens  
Make items shrink on different screens  
Order    
Change the order from 0 to 12 on small screens Try it
Wrap    
Don’t wrap items on different screens Try it
Wrap items on different screens Try it
Reverse the wrapping of items on different screens Try it
Align Content    
Align gathered items from the start on different screens Try it
Align gathered items at the end on different screens Try it
Align gathered items in the center on different screens Try it
Align gathered items «around» on different screens Try it
Stretch gathered items on different screens Try it
Align Items    
Align single rows of items from the start on different screens Try it
Align single rows of items at the end on different screens Try it
Align single rows of items in the center on different screens Try it
Align single rows of items on the baseline on different screens Try it
Stretch single rows of items on different screens Try it
Align Self    
Align a flex item from the start on different screens Try it
Align a flex item at the end on different screens Try it
Align a flex item in the center on different screens Try it
Align a flex item on the baseline on different screens Try it
Stretch a flex item on different screens Try it

Two Basic Bootstrap 4 Pages

The following example shows the code for a basic Bootstrap 4 page (with a responsive fixed width container):

Container Example

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap 4 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.5.2/css/bootstrap.min.css»>   <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>  <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script>   <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script> </head><body><div class=»container»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

The following example shows the code for a basic Bootstrap 4 page (with a full width container):

Container Fluid Example

<!DOCTYPE html><html lang=»en»><head>  <title>Bootstrap 4 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.5.2/css/bootstrap.min.css»>   <script src=»https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js»></script>  <script src=»https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js»></script>   <script src=»https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js»></script></head><body><div class=»container-fluid»>  <h1>My First Bootstrap Page</h1>  <p>This is some text.</p> </div></body></html>

Какую версию Bootstrap выбрать?

Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap. На текущий момент — это 4.5.0 (скачать).

Эта версия последняя и она основана, как было уже отмечено выше, на CSS Flexbox. Она поддерживает последние, стабильные версии всех основных браузеров и платформ. В операционной системе Windows эта версия поддерживает Internet Explorer 10-11 и Microsoft Edge.

Если же вам нужна поддержка более старых браузеров, например Internet Explorer 8 и 9, то в этом случае следует выбрать третью версию. Последняя актуальная версия из 3 ветки — это 3.4.1 (скачать).

В старых версиях Internet Explorer (8 и ниже) некоторые компоненты Bootstrap 3 могут отображаться без градиентов, теней и закруглённых углов. Это связано с тем, что эти версии браузеров не поддерживают необходимые для этого CSS3 свойства.

Следующий шаг в изучении Bootstrap, это его установка.

Следующий шаг – создание стандартного шаблона сайта

В любом удобном для вас месте создайте папку с проектом и создайте текстовый файл с названием «index». Далее следует обязательно поменять расширение у данного файла с .txt на .html.Как поменять расширение с .txt на .htmlЕсли по какой-то причине вы не можете поменять расширение файла, сделайте следующее. Вам следует сделать доступным изменять расширение у файлов. Как это сделать на Windows: в вашей папке переходим в меню и нажимаем Сервис — Параметры папок…


В открывшемся окне выбираем Вид и в данном окне вы увидите раздел — Дополнительные параметры,далее вам потребуется убрать выделение с параметра: Скрывать расширения для зарегистрированных типов файлов. Далее нажимаем ОК. Теперь у вас доступно изменение расширения файлов.

Colored Navbar

  • Active
  • Link
  • Link
  • Disabled
  • Active
  • Link
  • Link
  • Disabled
  • Active
  • Link
  • Link
  • Disabled

Use any of the classes to change the background color of the navbar (, , , , , , and )

Tip: Add a white text color to all links in the navbar with the class, or use the class to add a black text color.

Example

<!— Grey with black text —><nav class=»navbar navbar-expand-sm bg-light navbar-light»>  <ul class=»navbar-nav»>    <li class=»nav-item active»>      <a class=»nav-link» href=»#»>Active</a>    </li>    <li class=»nav-item»>      <a class=»nav-link» href=»#»>Link</a>    </li>    <li class=»nav-item»>      <a class=»nav-link» href=»#»>Link</a>    </li>    <li class=»nav-item»>      <a class=»nav-link disabled» href=»#»>Disabled</a>    </li>  </ul> </nav><!— Black with white text —><nav class=»navbar navbar-expand-sm bg-dark navbar-dark»>…</nav><!— Blue with white text —><nav class=»navbar navbar-expand-sm bg-primary navbar-dark»>…</nav>

Active/disabled state: Add the class to an element to highlight the current link, or the class to indicate that the link is un-clickable.

Bootstrap 3 vs. Bootstrap 4

Bootstrap 4 is the newest version of Bootstrap; with new components, faster stylesheet and more responsiveness.

Bootstrap 4 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 9 and down is not supported.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

Droppped icon support: Bootstrap 4 does not support BS3 Glyphicons. Use Font-Awesome or other icon libraries instead.

Toggleable / Dynamic Pills

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Menu 2

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

The same code applies to pills; only change the data-toggle attribute to :

Example

<!— Nav pills —><ul class=»nav nav-pills»>  <li class=»nav-item»>    <a class=»nav-link active» data-toggle=»pill» href=»#home»>Home</a>  </li>  <li class=»nav-item»>    <a class=»nav-link» data-toggle=»pill» href=»#menu1″>Menu 1</a>  </li>  <li class=»nav-item»>    <a class=»nav-link» data-toggle=»pill» href=»#menu2″>Menu 2</a>  </li></ul> <!— Tab panes —><div class=»tab-content»>  <div class=»tab-pane container active» id=»home»>…</div>  <div class=»tab-pane container fade» id=»menu1″>…</div>  <div class=»tab-pane container fade» id=»menu2″>…</div> </div>

Align Content

Control the vertical alignment of gathered flex items with the classes. Valid classes are (default), , , , and .

Note: These classes have no effect on single rows of flex items.

Click on the buttons below to see the difference between the five classes, by changing the vertical alignment of the flex items in the example box:

align-content-start align-content-end align-content-center align-content-around align-content-stretch

Example

Flex item 1 Flex item 2 Flex item 3 Flex item 4 Flex item 5 Flex item 6 Flex item 7 Flex item 8 Flex item 9 Flex item 10 Flex item 11 Flex item 12 Flex item 13 Flex item 14 Flex item 15 Flex item 16 Flex item 17 Flex item 18 Flex item 19 Flex item 20 Flex item 21 Flex item 22 Flex item 23 Flex item 24 Flex item 25

Example

<div class=»d-flex flex-wrap align-content-start»>..</div><div class=»d-flex flex-wrap align-content-end»>..</div><div class=»d-flex flex-wrap align-content-center»>..</div><div class=»d-flex flex-wrap align-content-around»>..</div><div class=»d-flex flex-wrap align-content-stretch»>..</div>

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Следующий шаг – организуйте следующую структуру папок в вашем проекте:

  • bootstarap(папка Bootstrap файлов)
    • css

      bootstap.min.css

      (папка стандартных CSS-стилей Bootstrap)
    • js 

      bootstap.min.js

      (папка jаvascript файлов Bootstrap)
  • js (папка для jаvascript-файлов)
    • jquery-3.3.1.min.js (JQuery-библиотека)
    • popper.min.js (JQuery-плагин для всплывающих окон)
    • main.js (JQuery-файл, где вы будете создавать собственный код)
  • css 

    style.css (файл с вашими CSS-стилями)

    (папка с вашими CSS-стилями)
  • index.html

После того как вы скачаете файлы, вам следует найти файлы прописанные в html-структуре и заменить их на те, что вы скачали.Также не забудьте подключить аналог шрифтов, которые указаны в шаблоне, данные шрифты можно найти через сервис Google Fonts.

Исходный код index.html

Navbar With Dropdown

Logo

  • Link 1
  • Link 2
  • Dropdown link Link 1 Link 2 Link 3

Navbars can also hold dropdown menus:

Example

<nav class=»navbar navbar-expand-sm bg-dark navbar-dark»>  <!— Brand —>  <a class=»navbar-brand» href=»#»>Logo</a>  <!— Links —>  <ul class=»navbar-nav»>    <li class=»nav-item»>      <a class=»nav-link» href=»#»>Link 1</a>    </li>    <li class=»nav-item»>      <a class=»nav-link» href=»#»>Link 2</a>    </li>    <!— Dropdown —>     <li class=»nav-item dropdown»>      <a class=»nav-link dropdown-toggle» href=»#» id=»navbardrop» data-toggle=»dropdown»>        Dropdown link      </a>      <div class=»dropdown-menu»>        <a class=»dropdown-item» href=»#»>Link 1</a>        <a class=»dropdown-item» href=»#»>Link 2</a>        <a class=»dropdown-item» href=»#»>Link 3</a>      </div>    </li>  </ul> </nav>

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

Flexbox

The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats, to handle the layout.

The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning. If you are new to flex, you can read about it in our CSS Flexbox Tutorial.

Note: Flexbox is not supported in IE9 and earlier versions.

If you require IE8-9 support, use Bootstrap 3. It is the most stable version of Bootstrap, and it is still supported by the team for critical bugfixes and documentation changes. However, no new features will be added to it.

To create a flexbox container and to transform direct children into flex items, use the class:

Example


Flex item 1 Flex item 2 Flex item 3

Example

<div class=»d-flex p-3 bg-secondary text-white»>  <div class=»p-2 bg-info»>Flex item 1</div>  <div class=»p-2 bg-warning»>Flex item 2</div>  <div class=»p-2 bg-primary»>Flex item 3</div></div>

To create an inline flexbox container, use the class:

Example

Flex item 1 Flex item 2 Flex item 3

Example

<div class=»d-inline-flex p-3 bg-secondary text-white»>  <div class=»p-2 bg-info»>Flex item 1</div>  <div class=»p-2 bg-warning»>Flex item 2</div>  <div class=»p-2 bg-primary»>Flex item 3</div></div>

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsGet Iframe Elements

Bootstrap Radio Buttons

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

The following example contains three radio buttons. The last option is disabled:

Example

<div class=»form-check»>  <label class=»form-check-label»>    <input type=»radio» class=»form-check-input» name=»optradio»>Option 1  </label></div><div class=»form-check»>  <label class=»form-check-label»>    <input type=»radio» class=»form-check-input» name=»optradio»>Option 2  </label></div> <div class=»form-check disabled»>  <label class=»form-check-label»>    <input type=»radio» class=»form-check-input» name=»optradio» disabled>Option 3  </label></div>

As with checkboxes, use the class if you want the radio buttons to appear on the same line:

Example

<div class=»form-check-inline»>  <label class=»form-check-label»>    <input type=»radio» class=»form-check-input» name=»optradio»>Option 1  </label></div><div class=»form-check-inline»>  <label class=»form-check-label»>    <input type=»radio» class=»form-check-input» name=»optradio»>Option 2  </label></div> <div class=»form-check-inline disabled»>  <label class=»form-check-label»>    <input type=»radio» class=»form-check-input» name=»optradio» disabled>Option 3  </label></div>

Try it Yourself Examples

This Bootstrap 4 tutorial contains hundreds of Bootstrap 4 examples.

With our online editor, you can edit the code, and click on a button to view the result.

Bootstrap 4 Example

<div class=»jumbotron text-center»>  <h1>My First Bootstrap Page</h1>  <p>Resize this responsive page to see the effect!</p> </div><div class=»container»>  <div class=»row»>     <div class=»col-sm-4″>      <h3>Column 1</h3>      <p>Lorem ipsum dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Column 2</h3>      <p>Lorem ipsum dolor..</p>    </div>    <div class=»col-sm-4″>      <h3>Column 3</h3>       <p>Lorem ipsum dolor..</p>    </div>  </div></div>

Click on the «Try it Yourself» button to see how it works.

Typography/Text Classes

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

Class Description Example
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: , , , Try it
Bold text Try it
Bolder bold text Try it
Normal text Try it
Light weight text Try it
Lighter weight text Try it
Italic text Try it
Makes a paragraph stand out Try it
Indicates smaller text (set to 85% of the size of the parent) Try it
Prevents long text from breaking layout Try it
Indicates center-aligned text Try it
Removes the underline from a link Try it
Indicates left-aligned text Try it
Indicates justified text Try it
Monospaced text Try it
Indicates no wrap text Try it
Indicates lowercased text Try it
Resets the color of a text or a link (inherits the color from its parent) Try it
Indicates right-aligned text Try it
Indicates uppercased text Try it
Indicates capitalized text Try it
Displays the text inside an element in a slightly smaller font size Try it
Removes the default list-style and left margin on list items (works on both and ). 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) Try it
Places all list items on a single line (used together with on each <li> elements) Try it
Makes a element scrollable Try it

Align Items

Control the vertical alignment of single rows of flex items with the classes. Valid classes are , , , , and (default).

Click on the buttons below to see the difference between the five classes:

align-items-start align-items-end align-items-center align-items-baseline align-items-stretch

Example

Flex item 1 Flex item 2 Flex item 3

Example

<div class=»d-flex align-items-start»>..</div><div class=»d-flex align-items-end»>..</div><div class=»d-flex align-items-center»>..</div><div class=»d-flex align-items-baseline»>..</div><div class=»d-flex align-items-stretch»>..</div>

Other Display Classes

Other display classes are also available:

Class Description Example
Hides an element Try it
Hides an element on a specific screen size Try it
Makes an element inline Try it
Makes an element inline on a specific screen size Try it
Makes an element inline block Try it
Makes an element inline block on a specific screen size Try it
Makes an element display as a table Try it
Makes an element display as a table on a specific screen size Try it
Makes an element display as a table cell Try it
Makes an element display as a table cell on a specific screen size Try it
Makes an element display as a table row Try it
Makes an element display as a table row on a specific screen size Try it
Creates a flexbox container and transforms direct children into flex items Try it
Creates a flexbox container on a specific screen size Try it
Creates an inline flexbox container Try it
Creates an inline flexbox container on a specific screen size Try it

Horizontal Direction

Use to display the flex items horizontally (side by side). This is default.

Tip: Use to right-align the horizontal direction:

Example

Flex item 1 Flex item 2 Flex item 3 Flex item 1 Flex item 2 Flex item 3

Example

<div class=»d-flex flex-row bg-secondary»>  <div class=»p-2 bg-info»>Flex item 1</div>  <div class=»p-2 bg-warning»>Flex item 2</div>  <div class=»p-2 bg-primary»>Flex item 3</div></div><div class=»d-flex flex-row-reverse bg-secondary»>  <div class=»p-2 bg-info»>Flex item 1</div>  <div class=»p-2 bg-warning»>Flex item 2</div>  <div class=»p-2 bg-primary»>Flex item 3</div></div>


С этим читают