Platform
- CMS
- AI
- Cloud
- Metaverse
- Mobile
- Blockchain
- Digital
- IoT
Pricing
Developers
Enterprise
About Us
Contact

How to Feature Updates and Resources with Bootstrap Boxes

Bootstrap Boxes provide a simple, modular solution for adding new sections of content to a web page.

Boxes. We use them to hold all kinds of things. They're simple, well-structured, and have endless applications. When you're moving, for example, you pack stuff in boxes and label them based on their content. Then you call your friends, hoping they'll help lift a few in exchange for pizza.

Websites are boxes, too, and they're generally composed of even smaller boxes (or containers) of content. And by using Bootstrap, you have a modular framework for adding new boxes wherever you need new content components. Again, very handy to have around.

Whether you have a website with frequently updated resources like schedules – or you just want to add a new section to your page without disturbing the rest of the layout – Bootstrap boxes are a great solution. They allow you to elegantly organize content with ease and customize links and actions. This includes everything from updating map routes to creating a contemporary shopping cart layout.

In this tutorial, we'll show you how to feature your updates and resources using Bootstrap Boxes. We've included all the code and direction so you can get started right now. And feel free to ask us questions in the Disqus below.

Just don't ask us to help you move.

Getting Started

The CDN links below are will get you to all of the necessary Bootstrap files. Go ahead and place them in your project's file inside the head tag:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- FontAwesome CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

HTML

The HTML structure is a three-column layout to hold three boxes for individual links. If you'd like to have a different number of columns, you can change the classnames of the columns from .col-md-4 and use .col-md-6 for a two-column layout or .col-md-3 for a four-column layout. Inside each column, there is an a tag that contains both the image and the link. This is so that a user can hover their mouse anywhere inside the box and click on the box to visit the link.

<section class="section section--box">
  <div class="container">
    <div class="text-center">
      <h1 class="h2">Updated Colonies & Schedules</h1>
      <p>Everything you need to plan your next trip with LunarXP.</p>
    </div>
    <div class="box-wrapper row mt-5">

      <div class="col-md-4 first-col" aria-hidden="true" tabindex="0">
        <div class="box-item">
          <a href="#" aria-label="visit Routes" tabindex="-1">
            <div class="image-container">
              <img src="https://raw.githubusercontent.com/solodev/updated-resources-section/master/images/travel.jpg" alt="Spacecraft image" class="img-fluid">
            </div>
            <span>Modified Routes & Schedules <i class="fa fas fa-angle-right" aria-hidden="true" title="right arrow"></i></span>
          </a>
        </div><!-- .box-item-->
      </div>
      <div class="col-md-4 second-col slick-current slick-active" aria-hidden="false" tabindex="-1">
        <div class="box-item">
          <a href="#" aria-label="visit new colonies page" tabindex="-1">
            <div class="image-container">
              <img src="https://raw.githubusercontent.com/solodev/updated-resources-section/master/images/new-colonies.jpg" alt="" class="img-fluid">
            </div>
            <span>New Colonies <i class="fa fas fa-angle-right" aria-hidden="true" title="right arrow"></i></span>
          </a>
        </div><!-- .box-item-->
      </div>
      <div class="col-md-4 third-col" aria-hidden="true" tabindex="-1">
        <div class="box-item">
          <a href="#" aria-label="visit Corona Virus Info page" tabindex="-1">
            <div class="image-container">
              <img src="https://raw.githubusercontent.com/solodev/updated-resources-section/master/images/covid-image.jpg" alt="Corona Virus Info " class="img-fluid">
            </div>
            <span>COVID-19 Information <i class="fa fas fa-angle-right" aria-hidden="true" title="right arrow"></i></span>
          </a>
        </div><!-- .box-item-->
      </div>
    </div><!-- row-->
  </div><!-- .row-->
</section>

CSS

The CSS code below is mostly for styling such as the colors and font sizes. Feel free to replace these values with your own to make the section match the design of your website.

.section--box {
    padding: 80px 0;
}

h2 {
    font-size: 2.5625rem;
}

p {
    letter-spacing: 0.5px;
    font-size: 1.5rem;
}

.box-wrapper {
    display: flex;
}

.box-wrapper .box-item {
    background: #fff;
    padding: 11px 13px 0 13px;
    box-shadow: 0 0 15px 0 rgba(127, 127, 127, 0.2);
}

.box-wrapper .box-item a {
    font-size: 1.2rem;
    text-align: center;
    display: block;
    color: #272727;
    font-weight: 600;
}

.box-wrapper .box-item a:hover {
    transition: all, 0.4s,ease;
    color: #c09;
    text-decoration: underline;
}

.box-wrapper .box-item span {
    display: block;
    padding: 28px 0;
    line-height: 1;
}

.box-wrapper .box-item a i {
    color: #c09;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    min-height: 240px;
}

.image-container {
height: 240px;
    overflow: hidden;
    object-fit: cover;
}

@media (max-width: 767.98px) {
.section--box .box-wrapper .box-item {
    margin: 23px -7.5px;
}
.img-fluid {
   min-height: 40px;
    max-height: 20px;
}
}

@media (min-width: 1200px) {
.section--box .box-wrapper .third-col .box-item {
    margin: 0 0 0 auto;
}
}

And there it is! Check out the JSFiddle example below to see how it looks before committing to use:

Share on Facebook Tweet It

Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter

Sign up to explore

Create an account in seconds and start building today.

Sign up for Solodev