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.

How to Create Quick Links

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:

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.

CSS

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

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

Author

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

Get started today

Join people and businesses across the globe that trust Solodev.

We never share your information with anyone. Learn more

We use cookies to provide and improve our services. By using our site, you consent to cookies.