Skip to main content Skip to docs navigation
View on GitHub

Wrapper

Component provides a versatile container with customizable backgrounds, including colors, images, and videos.

On this page

Examples

Background examples

Light color

Sample wrapper content
html 
<div class="wrapper wrapper-bg-light wrapper-text-dark">
  <div class="wrapper-content text-center">Sample wrapper content</div>
</div>

Dark color

Sample wrapper content
html 
<div class="wrapper wrapper-bg-dark wrapper-text-light">
  <div class="wrapper-content text-center">Sample wrapper content</div>
</div>

Custom color

Sample wrapper content
html 
<div class="wrapper" style="--bs-wrapper-bg-color: #f47c00; --bs-wrapper-color: #fff">
  <div class="wrapper-content text-center">Sample wrapper content</div>
</div>

Image

Sample wrapper content
html 
<div class="wrapper" style="--bs-wrapper-color: #fff; min-height: 400px">
  <div class="wrapper-content text-center">Sample wrapper content</div>

  <div class="wrapper-bg-media">
    <figure>
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
  </div>
</div>

Video

Sample wrapper content
html 
<div class="wrapper" style="--bs-wrapper-color: #fff; min-height: 400px">
  <div class="wrapper-content text-center">Sample wrapper content</div>

  <div class="wrapper-bg-media">
    <figure>
      <video autoplay muted playsinline loop>
        <source src="assets/media/sample-video.mp4" type="video/mp4">
        <source src="assets/media/sample-video.ogg" type="video/ogg">
      </video>
    </figure>
  </div>
</div>

With the --bs-wrapper-media-overlay and --bs-wrapper-media-overlay-opacity variables, we have more control over the presentation of our content. The --bs-wrapper-media-overlay variable allows us to set the background of the overlay layer. Simultaneously, the --bs-wrapper-media-overlay-opacity variable adjusts the overlay layer’s opacity level. Effectively, these settings introduce an overlay effect that results in a visually attractive design where the wrapper’s content is visible through the overlay layer.

Sample wrapper content
html 
<div class="wrapper" style="--bs-wrapper-color: #fff; --bs-wrapper-media-overlay: #f47c00; --bs-wrapper-media-overlay-opacity: 0.8; min-height: 400px">
  <div class="wrapper-content text-center">Sample wrapper content</div>

  <div class="wrapper-bg-media">
    <figure>
      <video autoplay muted playsinline loop>
        <source src="assets/media/sample-video.mp4" type="video/mp4">
        <source src="assets/media/sample-video.ogg" type="video/ogg">
      </video>
    </figure>
  </div>
</div>

Content examples

Headline and text

Your next destination

Escape ordinary, experience majestic views!

html 
<div class="wrapper" style="--bs-wrapper-color: #fff; min-height: 400px">
  <div class="wrapper-content wrapper-content-text-shadow fs-5">
    <h2>Your next destination</h2>
    <p>Escape ordinary, experience majestic views!</p>
  </div>

  <div class="wrapper-bg-media">
    <figure>
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
  </div>
</div>

Your next destination

Escape ordinary, experience majestic views!

Find out more

html 
<div class="wrapper" style="--bs-wrapper-color: #fff; min-height: 400px">
  <div class="wrapper-content wrapper-content-text-shadow fs-5">
    <h2>Your next destination</h2>
    <p>Escape ordinary, experience majestic views!</p>
    <p>
      <a href="#" class="btn btn-light btn-sm icon-link">Find out more <svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
</svg>

</a>
    </p>
  </div>

  <div class="wrapper-bg-media">
    <figure>
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
  </div>
</div>

Works great with .wrapper-zoom class.

Your next destination

Escape ordinary, experience majestic views!

Find out more

html 
<div class="wrapper wrapper-zoom" style="--bs-wrapper-color: #fff; min-height: 400px">
  <div class="wrapper-content wrapper-content-text-shadow fs-5">
    <h2>Your next destination</h2>
    <p>Escape ordinary, experience majestic views!</p>
    <p>
      <a href="#" class="btn btn-light btn-sm icon-link stretched-link">Find out more <svg class="of-icon" width="32" height="32" fill="currentColor">
	<use href="/assets/icons/bootstrap-icons.svg#arrow-right"/>
</svg>

</a>
    </p>
  </div>

  <div class="wrapper-bg-media">
    <figure>
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
  </div>
</div>

The hidden link will make the whole wrapper clickable, but will not display any text. Works great with .wrapper-zoom class.

Earth from space

Touch the stars, gaze at Earth's grace!

html 
<div class="wrapper wrapper-zoom" style="--bs-wrapper-color: #fff; min-height: 400px">
  <div class="wrapper-content wrapper-content-text-shadow fs-5">
    <h2>Earth from space</h2>
    <p class="mb-0">Touch the stars, gaze at Earth's grace!</p>
    <a href="#" class="stretched-link"><span class="visually-hidden">Book now</span></a>
  </div>

  <div class="wrapper-bg-media">
    <figure>
      <video autoplay muted playsinline loop>
        <source src="assets/media/sample-video.mp4" type="video/mp4">
        <source src="assets/media/sample-video.ogg" type="video/ogg">
      </video>
    </figure>
  </div>
</div>

Date & Status

open

Your next destination

Escape ordinary, experience majestic views!

12.
OKT.
html 
<div class="wrapper wrapper-zoom" style="--bs-wrapper-color: #fff">
  <div class="wrapper-content-top-right">
    <div class="state state--open">open</div>
  </div>

  <div class="wrapper-content wrapper-content-text-shadow fs-5 text-center">
    <h2>Your next destination</h2>
    <p class="mb-0">Escape ordinary, experience majestic views!</p>
    <a href="#" class="stretched-link"><span class="visually-hidden">Book now</span></a>
  </div>

  <div class="wrapper-content-bottom-left">
   <div class="date-box">
      <div class="date-box__day">12.</div>
      <div class="date-box__month">OKT.</div>
    </div>
  </div>

  <div class="wrapper-bg-media">
    <figure>
      <img src="assets/media/sample-image.jpg" alt="">
    </figure>
  </div>
</div>

Content Style

Sample wrapper content
html 
<div class="wrapper wrapper-bg-light wrapper-text-dark">
  <div class="wrapper-content wrapper-content-text-shadow text-center fs-4">Sample wrapper content</div>
</div>

CSS

Variables

src/scss/_wrapper.scss 
--#{$prefix}wrapper-padding-y: #{$wrapper-padding-y};
--#{$prefix}wrapper-padding-x: #{$wrapper-padding-x};
--#{$prefix}wrapper-color: #{$wrapper-color};
--#{$prefix}wrapper-bg-color: #{$wrapper-bg-color};
--#{$prefix}wrapper-z-index: #{$wrapper-z-index};
--#{$prefix}wrapper-media-overlay: #{$wrapper-media-overlay};
--#{$prefix}wrapper-media-overlay-opacity: #{$wrapper-media-overlay-opacity};
--#{$prefix}wrapper-text-shadow: #{$wrapper-text-shadow};
--#{$prefix}wrapper-font-size: #{$wrapper-font-size};
--#{$prefix}wrapper-line-height: #{$wrapper-line-height};
--#{$prefix}wrapper-zoom-transform: #{$wrapper-zoom-transform};
--#{$prefix}wrapper-content-top-right-y: #{$wrapper-content-top-right-y};
--#{$prefix}wrapper-content-top-right-x: #{$wrapper-content-top-right-x};

Sass variables

src/scss/_variables.scss 
$wrapper-color: var(--#{$prefix}body-color);
$wrapper-bg-color: null;
$wrapper-bg-color-light: #f8f9fa;
$wrapper-bg-color-dark: #212529;
$wrapper-z-index: 1;
$wrapper-media-overlay: #000;
$wrapper-media-overlay-opacity: .4;
$wrapper-media-zoom-transition: all .5s ease-in-out;
$wrapper-text-shadow: 2px 3px 5px rgba(0, 0, 0, .5);
$wrapper-font-size: null;
$wrapper-line-height: var(--#{$prefix}body-line-height);
$wrapper-zoom-transform: scale(1.1);
$wrapper-content-top-right-y: 10px;
$wrapper-content-top-right-x: $wrapper-content-top-right-y;
$wrapper-padding-y: 5rem;
$wrapper-padding-x: 1.5rem;