search

Boostrap 2 Cards,Carousel, image overlay and dropdown

We use text-break to avoid strings overflowing their available width :

//This will work only on single-long strings
//It applies word-wrap: break-word/word-break: break-word.

<div className="row col-4 mx-0 text-break">
  <p> ReallyLongEmail@gmail.com </p>
</div>
text-break on single string

hashtag
Cards and color/text customization

Cards are blocks of content easily customizable, with card-header, card-body, and card-footer :

basic simple card

We can use pureCSS grid layout to display cards in a row, with padding and border-box:

chevron-rightRow of cards with padding guidehashtag

Check also the bootstrap classes colors:

4 cards in grid, space padding and colors

Bootstrap borders can use border-1/5 for width, border-top/start for position, and border-top-0 to hide one margin.

margin positions, width and colors

Or we could use Bootstrap W(idth) and wrap flex:

Colors and text-align are:

We can also have Nav(igation) in our card, with nav, nav-tabs, and card-header-tabs:

a disabled,active and normal nav-link

For horizontal cards we use grids:

hashtag
Image overlay and carousel

To overlay text on an image in a card unit we use card-img-overlay for the text card:

image and text share background

For a basic carousel, we need a carousel class and id target and data-bs-ride="carousel" in the carousel container.

Carousel images go into the carousel-inner container, and one of the carousel-item needs to be active class for the carousel to be visible.

We use data-bs-target and data-bs-slide for the side control arrows.

basic carousel

We can also add text-captions to the carousel, timed slides, and carousel indicators/buttons:

chevron-rightCarousel indicators, interval and captions guidehashtag

Indicators work as a navbar, but we need extra CSS to style the active one:

Carousel-indicators is a list of the carousel images, each item needs the id target of the carousel and data-bs-slide-to for its position, and like images it needs one item to be class="active".

By default there is a 5 seconds auto-scroll, we can change it with data-bs-interval, hovering the slide will stop it.

We add text in the carousel-caption container, and we use breakpoints to hide them on smaller screens.

carousel indicators and captions

hashtag
Dropdown, breadcrumbs, and button extra effects

For a dropdown button, we need dropdown-toggle, data-bs-toggle, and data-bs-offset.

For the dropdown items, we need dropdown-menu > dropdown-item.

basic dropdown with offset

We have button+arrow dropdown and direction dropdown content, we need btn-group and dropdown-menu- .

Badges are small labels that can be put inside or on the border of buttons, we need badge and translate-middle classes on span elements:

We can use breadcrumbs to organize navigation links:

PreviousBoostrap 1 Modal, Pagination, form layout and input componentNextBoostrap 3 Bootstrap grid, Scrollspy, Toast and responsive navbar

Last updated