Components
<div class="d-flex align-items-center bold muted">
<div class="spinner-border spinner-border-sm text-warning mr-2" role="status"><span class="sr-only">Loading...</span> </div>
Loading … </div>
<div class="p-4 mb-2 muted">
<h5 class="text-danger d-flex align-items-center">
<svg class="mr-1" width="16" height="16" fill="currentColor">
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#exclamation-triangle"></use>
</svg>
Oh no!</h5>
<span class="small-expanded-uppercase">Error Log:</span>
<ul>
<li sc-for-each="contentError.messages">{{value}}</li>
</ul>
</div>
You can utilize any of the background colors to build alert messages. We have updated our colors, you can review alerts here on Bootstrap.
Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
<div class="alert bg-success text-white" role="alert">
<svg class="mr-1 align-text-top" width="16" height="16" fill="currentColor">
<title>Thumbs Up</title>
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#thumbs-up"></use>
</svg>
A simple success alert with <a href="#" class="text-white uline">an example link</a>. Give it a click if you like. </div>
Buttons communicate what action will occur on a page when the user interacts with them. Buttons use sentence-casing (only capitalize the first letter of the first word). Copy used within a button should be unambiguous and concise, making it clear to the user what action will occur once the button is clicked.
<button class="btn btn-primary">Primary</button>
<button class="btn btn-pill btn-primary">Primary Pill</button>
<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-pill btn-outline-secondary">Secondary Pill</button>
<button class="btn btn-info">Information</button>
<button class="btn btn-pill btn-info">Information Pill</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Regular</button>
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-pill btn-primary btn-sm">Small Pill</button>
<button class="btn btn-pill btn-primary">Regular Pill</button>
<button class="btn btn-pill btn-primary btn-lg">Large Pill</button>
<div class="btn-group" role="group" aria-label="Button group">
<button type="button" class="btn btn-outline-secondary">Left</button>
<button type="button" class="btn btn-outline-secondary">Middle</button>
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>
<button class="btn mb-1 btn-pill btn-info">
<svg class="text-white align-text-top" style="transform:rotate(320deg);" width="16" height="16" fill="currentColor">
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#phone-volume"></use></svg>
Call</button>
Cards provide nearly unlimited options to group and present content. Follow Boostrap's guidelines for creating cards. Below are some custom examples we use on the website.
Our highest level of coverage with popular options that allow you to customize your plan.
$799.00
Includes CFAR
Buy Now<div class="card card-plan">
<div class="card-body">
<h1 class="font-weight-light card-title">RoundTrip Choice</h1>
<p class="card-text">Our highest level of coverage with popular options that allow you to customize your plan.</p>
<p class="card-price">$799.00</p>
<p class="card-text font-weight-light">Includes CFAR</p>
<a href="#" class="btn btn-pill btn-primary mb-4" data-sf-ec-immutable="">Buy Now</a>
<p>
<svg class="mr-1 text-blue" width="18" height="18" fill="currentColor">
<title>Select</title>
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/regular.svg#file"></use>
</svg>
<a href="#" class="uline" data-sf-ec-immutable="">Download Full Policy</a></p>
</div>
</div>
<div class="card card-type card-body"> <span class="card-text-benefit d-flex"> Trip Interruption <a data-toggle="popover" data-trigger="hover" data-html="true" data-content=" <p> If you must cut your trip short, start your trip late, rejoin your trip, or return from your trip late due to a Trip Interruption Covered Reason, this reimburses you for:</p> <ol> <li> Your unused, prepaid, non-refundable trip expenses; and </li> <li> Additional transportation costs. </li> </ol> <ul class='small list-unstyled'> <li> <sup> 2</sup> If you provide $0 as your trip cost, the Trip Interruption benefit covers return air ticket cost included up to $1,000per person.</ul> " data-sf-ec-immutable="">
<svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor">
<title> More Information</title>
<use xlink:href="ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"> </use>
</svg>
</a> </span> <a data-target=".tc-trigger-modal" href="/plans/trip-protection/round-trip#trigger2" data-toggle="modal" class="trigger-click uline" data-sf-ec-immutable=""> Included interruption reasons</a> </div>
<div class="card card-benefit card-body">
<span class="card-text-benefit">$250 per day</span>
<span class="card-limit">(up to $2,000)</span>
</div>
<div class="card card-optional card-body">
<div class="form-group mb-0">
<input id="event" type="checkbox">
<label for="event">Add Event Ticket Registration Fee Protection </label>
</div>
<span class="card-limit">(Up to 35,000)</span> <span class="card-price"><small>Starting at</small> $10.00 <small>/traveler</small></span> </div>
<div class="card card-select card-body">
<div class="form-group"><label for="medMax">Maximum Medical Coverage</label>
<select class="form-control" id="medMax">
<option>$10,000</option>
<option>$50,000</option>
<option>$100,000</option>
<option>$500,000</option>
<option>$1,000,000</option>
<option>$2,000,000</option>
<option>$5,000,000</option>
</select>
</div>
</div>
How to stay safe during your adventure in the great, wide somewhere.
Read more »<div class="card"><img class="card-img-top" src="https://www.sevencorners.com/images/default-source/default-album/young-woman-reading-map-in-europe-small.jpg" alt="Young woman reading a map in Europe.">
<div class="card-body">
<h3 class="card-title tk-museo-slab">10 Safety Tips for Solo Female Travel</h3>
<p class="card-text">How to stay safe during your adventure in the great, wide somewhere.</p>
<a href="https://www.sevencorners.com/blog/travel-tips/10-safety-tips-for-solo-female-travel" class="card-link">Read more »</a></div>
</div>
The following information outlines when and how to set up page headers. Visit the Bootstrap documenation for more form options.
<div class="form-group">
<input id="option-a" type="radio" name="option">
<label for="option-a">Option A</label>
</div>
<div class="form-group">
<input id="option-b" type="radio" name="option">
<label for="option-b">Option B</label>
</div>
<div class="form-large">
<div class="form-group position-relative py-2 px-4">
<input id="vacation" type="radio" name="where">
<label for="vacation">I'm going on vacation</label>
<div class="bg-form"></div>
</div>
<div class="form-group position-relative py-2 px-4">
<input id="business" type="radio" name="where">
<label for="business">I'm traveling for business</label>
<div class="bg-form"></div>
</div>
<div class="form-group position-relative py-2 px-4">
<input id="Scholar" type="radio" name="where">
<label for="Scholar">I’m a student, faculty or scholar studying abroad</label>
<div class="bg-form"></div>
</div>
</div>
<div class="form-group">
<input id="rental" type="checkbox">
<label for="rental"><strong>Rental Car Damage Coverage in Bold</strong></label>
</div>
<div class="form-group">
<input id="golf" type="checkbox">
<label for="golf">Golf Round Coverage</label>
</div>
<div class="form-group position-relative py-2 px-4">
<input id="traveler-01" type="checkbox">
<label for="traveler-01">John</label>
<span class="text-blue bold float-right mr-3">$10.00</span>
<div class="bg-form"></div>
</div>
<div class="form-group position-relative py-2 px-4">
<input id="traveler-02" type="checkbox">
<label for="traveler-02">Marcus</label>
<span class="text-blue bold float-right mr-3">$10.00</span>
<div class="bg-form"></div>
</div>
<div class="form-group position-relative py-2 px-4">
<input id="traveler-03" type="checkbox">
<label for="traveler-03">Kelly</label>
<span class="text-blue bold float-right mr-3">$10.00</span>
<div class="bg-form"></div>
</div>
<div class="card card-select card-body">
<div class="form-group"><label for="medMax">Maximum Medical Coverage <a data-toggle="popover" data-content="Descriptive information to help the customer" data-sf-ec-immutable="">
<svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor"><title>More Information</title>
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"></use></svg>
</a> </label>
<select class="form-control" id="medMax">
<option>$10,000</option>
<option>$50,000</option>
<option>$100,000</option>
<option>$500,000</option>
<option>$1,000,000</option>
<option>$2,000,000</option>
<option>$5,000,000</option>
</select>
</div>
</div>
The following information outlines when and how to set up page headers.
<div class="display-4">Why are you traveling?<a data-toggle="popover" data-trigger="hover" data-content="Descriptive information to help the customer">
<svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor">
<title>More Information</title>
<use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"></use>
</svg>
</a></div>
<div class="h4 bg-light font-weight-light p-2 pl-3">Trip Interruption/Delay</div>
<div class="h6 text-white text-center bg-info py-2">MOST POPULAR</div>
<div class="h5 text-primary">PRIMARY TRAVELER</div>