Platform
- Cloud
- CMS
- AI
- Blockchain
- Digital
- IoT
- Metaverse
- Mobile
Explore
Marketplace
Careers
Contact Us
Connect

How to Create Quick Links

Quick Links can help highlight the most important pages on your website. With Bootstrap's column structure, you can easily create an intuitive and stylish Quick Links section.

Archimedes said, "the shortest path between two points is a straight line." Obviously, he never used a website.

All too often, the path for visitors is less than straight – and that impacts everything from page bounce rates to the overall customer experience.

You only have a few seconds to grab a user's attention and guide them to the next step in their journey. That's why Quick Links are a great way to connect your visitors to the most frequented or highly trafficked pages on your website. They're simple, intuitive, visual, and more clickable than your average link.

By utilizing Bootstrap's column structure capabilities, you can dynamically handle the styling of your Quick Links, making it easy to add new links in a well-organized grid that's easy on the eyes. In previous articles, we've shared how creative links treatments like this can improve the digital experience, like featured list items in navigation menus.

In this tutorial, we'll show you how easy it is to create a Quick Links section using Bootstrap, HTML, and CSS.

Getting Started

Since we'll be using Bootstrap, copy and paste the Bootstrap CDN links below in the head section of your HTML file:

<!-- 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">
<!-- 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

Below, we have a Bootstrap grid structure and 8 boxes for links. Each box is sized using Bootstrap's column structure and have the classnames col-xl-3 col-lg-4 col-sm-6 col-12 meaning in large desktop screens, there will be four boxes laid out horizontally, in regular desktop screens three, on smaller screens two and on mobile screens, each column will take up the entire width. The total width is made up of 12-columns. You can adjust the number of columns by changing the numbers, for example, if you'd like to display only three columns on large screens, you can change the col-xl-3 value to col-xl-4 and have three equal-width columns across.

<section class="section mt-5 mb-5">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <h1 class="text-center mb-5">More Information</h1>
   
            <div class="row">
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">Asteroid <br>packages</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">Space excursions</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">Five-star & <br>menu options</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">Orbital entertainment</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">SpaceJet Flex <br>ticketing</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">Shuttle <br>Locations</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">Transit Services</a>
                </div><!-- .box-information-->
              </div>
   
              <div class="col-xl-3 col-lg-4 col-sm-6 col-12">
                <div class="box-information mx-0">
                  <a href="">JetPet program</a>
                </div><!-- .box-information-->
              </div>
            </div><!-- .row-->
          </div>
        </div>
      </div>
    </section>

CSS

Customize the background color, hover color and text/link colors by modifying the hex values.

.section h1 {
    font-size: 37px;
  }
  
  .section .box-information {
    height: 115px;
    border: 1px solid #dbdbdb;
    margin-bottom: 30px;
  }
  
  .section .box-information a {
    font-size: 21px;
    line-height: 29px;
    font-weight: 600;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;
    height: 100%;
    position: relative;
    color: #222;
    border-bottom: 4px solid #d60e96;
  }
  
  .section .box-information a:hover {
    transition: all, 0.4s, ease;
    background: linear-gradient(135deg, #ff9024 1%, #ff705e 44%, #ff5a85 55%, #ff2cd6 100%);
    color: #fff;
    text-decoration: none;
  }
  
  /* Media Queries */
  
  @media (min-width: 768px) {
    .section h1 {
      margin-bottom: 8px;
    }
  }
  
  @media (min-width: 992px) {
    .section .box-information {
      margin: 0 5px 30px;
    }
  }
  
  @media (max-width: 767.98px) {
    .section .box-information {
      height: 85px;
      margin-bottom: 15px;
    }
  }

And there it is! Check out the JSFiddle below to see how the quick links look before committing to its use.

Download from Github

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

Terms Privacy Policy