Все что нужно знать о раскрывающихся списках (dropdown)

Содержание

Beta 3 changes

While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you’re updating to Beta 3 from Beta 2 or any older version of Bootstrap.


Miscellaneous

  • Removed the unused variable. We weren’t transitioning anything, so it was just extra code.
  • The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the folder, you should adapt your workflow.

Forms

  • Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer with sibling and ) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the attribute (previously requiring a parent class) and better supporting our form validation.

    As part of this, we’ve changed the CSS for managing multiple s on custom form checkboxes and radios. Previously, the now removed element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have for the fill and gradient and handles the icon.

    To make a custom check inline, add .

  • Updated selector for input-based button groups. Instead of for style and behavior, we use the attribute just for JS behaviors and rely on a new class for styling.

  • Removed in favor of a slightly improved . This way and can be used on elements with ease.

  • Custom file inputs received a change to their Sass variable. It’s no longer a nested Sass map and now only powers one string—the button as that is now the only pseudo-element generated from our Sass. The text now comes from the .

Input groups

  • Input group addons are now specific to their placement relative to an input. We’ve dropped and for two new classes, and . You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in .

  • Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).

  • Sizing classes must be on the parent and not the individual form elements.

Overview

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.

Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use / which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

If you’re building our JavaScript from source, it .

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

Auto-layout columns

Utilize breakpoint-specific column classes for equal-width columns. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.

For example, here are two grid layouts that apply to every device and viewport, from to .

1 of 2 1 of 2 1 of 3 1 of 3 1 of 3

Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and the others will automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.

1 of 3 2 of 3 (wider) 3 of 3 1 of 3 2 of 3 (wider) 3 of 3

Variable width content

Using the classes, columns can size itself based on the natural width of its content. This is super handy with single line content like inputs, numbers, etc. This, in conjunction with classes, is very useful for centering layouts with uneven column sizes as viewport width changes.

1 of 3 Variable width content 3 of 3 1 of 3 Variable width content 3 of 3

Create equal-width columns that span multiple rows by inserting a where you want the columns to break to a new line. Make the breaks responsive by mixing the with some responsive display utilities.

col col col col

Стили раскрывающихся списков

В отличие от типов раскрывающихся списков, «стили раскрывающихся списков» относятся к тому, как на самом деле выглядит выпадающий список, а не как он работает. Ниже я перечислил ряд распространенных стилей.


Я называю этот стиль «стандартным», потому что именно его мы привыкли видеть.

Стандартный стиль (attached)

Стандартный стиль с отдельным списком (detached)

Я встречаю стиль с отдельным меню все чаще и чаще. Это имеет смысл, поскольку позволяет меню находиться над или под полем в зависимости от области просмотра браузера.

Стандартный стиль (detached)

Закругленные границы прекрасно подходят интерфейсам, имеющим игривый внешний вид.

Закругленные границы

С иконками

Добавление простой иконки в начало поля ввода может сделать его более «спроектированным». Когда кто-то жалуется, что форма выглядит слишком скучно («Стив, это форма с 20 полями ввода – как думаешь, на что она будет похожа?»), я просто добавляю иконки.

Раскрывающийся список с иконками

С изображениями

Как правило, я избегаю добавлять изображения к элементам в раскрывающемся списке – просто потому, что обновлять его крайне трудно, особенно, если список сильно меняется. Однако это очень полезно, когда вы хотите показать разницу между вещами (собаками, пирожными, офисной мебелью и т. д.).

Раскрывающийся список с изображениями. Фото с Unspalsh.Фото: Strawberry cake — @alinasagirova , Cheese cake — @patuphotos, Chocolate cake — @tuvaloland

Однако, я придерживаюсь мнения, что из-за ограниченного размера раскрывающегося списка очень трудно увидеть, что представляют собой изображения (см. скриншот выше). Поэтому обычно это не стоит усилий, если вы не сделаете изображения действительно большими.

Раскрывающийся список Material Design с заливкой

Мои постоянные читатели знают, что я большой поклонник Material Design, включая их выпадающие списки.

Раскрывающийся список Material Design с линией

Поле «только линия» было заменено на «раскрывающийся список с заливкой», и, судя по пользовательским тестам оно работает лучше. Это намного удобнее для пользователя – и в это главное.

Раскрывающийся список Material Design с заливкой

Раскрывающийся список Material Design с рамкой

Как и их текстовые поля с рамкой, раскрывающиеся списки с рамкой Material Design крутые. Их меню отделено от раскрывающегося контейнера, что может помочь решить некоторые проблемы юзабилити.

Раскрывающийся список Material Design с рамкой

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

<div class=»dropdown»>  <button class=»dropbtn»>Dropdown</button>  <div class=»dropdown-content»>    <a href=»#»>Link 1</a>    <a href=»#»>Link 2</a>    <a href=»#»>Link 3</a>  </div></div>

Example Explained

Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element.

Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it.

Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */.dropbtn {  background-color: #4CAF50;  color: white;  padding: 16px;   font-size: 16px;  border: none;}/* The container <div> — needed to position the dropdown content */.dropdown {   position: relative;  display: inline-block;}/* Dropdown Content (Hidden by Default) */ .dropdown-content {  display: none;  position: absolute;  background-color: #f1f1f1;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}/* Links inside the dropdown */ .dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;   display: block;}/* Change color of dropdown links on hover */ .dropdown-content a:hover {background-color: #ddd;}/* Show the dropdown menu on hover */.dropdown:hover .dropdown-content {display: block;}/* Change the background color of the dropdown button when the dropdown content is shown */.dropdown:hover .dropbtn {background-color: #3e8e41;}

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The class uses , which is needed when we want the dropdown content to be placed right below the dropdown button (using ).

The class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the to 100% (and to enable scroll on small screens).

Instead of using a border, we have used the property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Basic Dropdown

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

Dropdown Example

  • HTML
  • CSS
  • JavaScript
  • About Us

Example

<div class=»dropdown»>   <button class=»btn btn-primary dropdown-toggle» type=»button» data-toggle=»dropdown»>Dropdown Example   <span class=»caret»></span></button>   <ul class=»dropdown-menu»>    <li><a href=»#»>HTML</a></li>     <li><a href=»#»>CSS</a></li>     <li><a href=»#»>JavaScript</a></li>   </ul></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.

The class creates a caret arrow icon (), which indicates that the button is a dropdown.

Add the class to a element to actually build the dropdown menu.

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

Элементы меню

Компонент «NavBar» состоит из нескольких подкомпонентов, которые можно добавлять или исключать по мере необходимости.

Название или логотип компании

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Текстовая ссылка -->
    <a class="navbar-brand" href="#">Brand</a>
    ..........
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Ссылка с логотипом -->
    <a class="navbar-brand" href="#">
        <img src="/images/logo.png" width="50" height="50" alt="...">
    </a>
    ..........
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Ссылка с логотипом и текстом-->
    <a class="navbar-brand" href="#">
        <img src="/images/logo.png" class="d-inline-block align-top" width="50" height="50" alt="...">
        Brand
    </a>
    ..........
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- Как заголовок без ссылки-->
    <span class="navbar-brand mb-0 h1">Brand</span>
    ..........
</nav>

Кнопка для открытия меню

Имеет css-класс и предназначена для показа и скрытия содержимого меню на малениких экранах:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    ..........
</nav>

Блок содержимого меню

Имеет css-классы и скрывается в контрольной точке, которая задается классом . Может быть показано и скрыто по клику на кнопке :

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        ..........
    </div>
    ..........
</nav>

Блок ссылок меню

Имеет css-класс и состоит из ссылок и вложенных выпадающих списков со ссылками:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">
                    Первая ссылка <span class="sr-only">(текущая)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Вторая ссылка</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                   role="button" data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    Выпадающее меню
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Третья ссылка</a>
                    <a class="dropdown-item" href="#">Четвертая ссылка</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Пятая ссылка</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Не активная</a>
            </li>
        </ul>
        ..........
    </div>
    ..........
</nav>

Форма внутри меню

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    ..........
    <div class="collapse navbar-collapse" id="navbar-example">
        ..........
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search"
                   aria-label="Search">
            <button class="btn btn-outline-info my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
    ..........
</nav>

Текст внутри меню

Класс — позволяет добавлять текст в меню.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <span class="navbar-brand mb-0 h1">Brand</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbar-example" aria-controls="navbar-example"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar-example">
        <ul class="navbar-nav">
            <li class="nav-item">...</li>
            <li class="nav-item">...</li>
            <li class="nav-item">...</li>
        </ul>
        <!-- Текст внутри меню -->
        <span class="navbar-text mx-auto">Navbar text with an inline element</span>
        <form class="form-inline">
            ..........
        </form>
    </div>
</nav>

Поиск: Bootstrap • CSS • HTML • Web-разработка • Верстка • Компонент • Меню • Навигация • Фреймворк • Navbar

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

Options

There are certain options which can be passed to Bootstrap method to customize the functionality of a dropdown. Options can be passed via data attributes or JavaScript.

For setting the dropdown options via data attributes, just append the option name to , like , , and so on.

Name        
Type            
Default Value Description
offset number | string | function Specify the offset of the dropdown relative to its target. You can specify offset in various units, like , , , , etc. Unit-less values interpreted as pixels.
flip boolean true Allow Dropdown to flip in case of an overlapping on the reference element.
boundary string | element ‘scrollParent’ Overflow constraint boundary of the dropdown menu. Accepts the values of , , , or an HTMLElement reference (JavaScript only).
reference string | element ‘toggle’ Reference element of the dropdown menu. Accepts the values of , , or an HTMLElement reference.
display string ‘dynamic’ Specify the dynamic positioning for dropdowns. You can disable this with the value

See the Popper.js’s documentation for more information on options mentioned above.

Note: When the boundary is set to any value other than , the style is applied to the container.

Dropdown Events

The following table lists all available dropdown events.

Event Description Try it
show.bs.dropdown Occurs when the dropdown is about to be shown. Try it
shown.bs.dropdown Occurs when the dropdown is fully shown (after CSS transitions have completed) Try it
hide.bs.dropdown Occurs when the dropdown is about to be hidden Try it
hidden.bs.dropdown Occurs when the dropdown is fully hidden (after CSS transitions have completed) Try it

Tip: Use jQuery’s event.relatedTarget to get the element which triggered the dropdown:

Example


$(«.dropdown»).on(«show.bs.dropdown», function(event){  var x = $(event.relatedTarget).text(); // Get the text of the element  alert(x);});

Шаг 3 — Как создать выпадающее меню CSS

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and units.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Badges can be used as part of links or buttons to provide a counter.

Notifications 4

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.

Profile 9 unread messages

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Danger Warning Info Light Dark

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the class.

Pill badges

Use the modifier class to make badges more rounded (with a larger and additional horizontal ). Useful if you miss the badges from v3.

Primary Secondary Success Danger Warning Info Light Dark

Using the contextual classes on an element quickly provide actionable badges with hover and focus states.

Responsive classes

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts. Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

All breakpoints

For grids that are the same from the smallest of devices to the largest, use the and classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .

col col col col

col-8 col-4

Stacked to horizontal

Using a single set of classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

col-sm-8 col-sm-4

col-sm col-sm col-sm

Mix and match


Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col .col-md-8 .col-6 .col-md-4

.col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4

.col-6 .col-6

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

Customizing the grid

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns and their horizontal padding (aka, gutters) can be modified via Sass variables. is used to generate the widths (in percent) of each individual column while allows breakpoint-specific widths that are divided evenly across and for the column gutters.

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just three grid tiers, you’d update the and to something like this:

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will out a brand new set of predefined grid classes for column widths, offsets, pushes, and pulls. Responsive visibility utilities will also be updated to use the custom breakpoints.

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

Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment

One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns One of three columns

One of three columns One of three columns One of three columns

Horizontal alignment

One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns One of two columns

No gutters

The gutters between columns in our predefined grid classes can be removed with . This removes the negative s from and the horizontal from all immediate children columns.

Here’s the source code for creating these styles. Note that column overrides are scoped to only the first children columns and are targeted via attribute selector. While this generates a more specific selector, column padding can still be further customized with spacing utilities.

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-12 .col-sm-6 .col-md-8 .col-6 .col-md-4

Column wrapping

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.

.col-9 .col-4Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. .col-6Subsequent columns continue along the new line.

Column resets

With the handful of grid tiers available, you’re bound to run into issues where, at certain breakpoints, your columns don’t clear quite right as one is taller than the other. To fix that, use a combination of a and our responsive utility classes.

.col-6 .col-sm-3 .col-6 .col-sm-3

.col-6 .col-sm-3 .col-6 .col-sm-3

In addition to column clearing at responsive breakpoints, you may need to reset offsets, pushes, or pulls. See this in action in the grid example.

.col-sm-5 .col-md-6 .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col.col-sm-6.col-md-5.col-lg-6 .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0


С этим читают