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.
Since we'll be using Bootstrap, copy and paste the Bootstrap CDN links below in the head section of your HTML file:
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.
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.