How to Organize Your Links Using Bootstrap Columns

In this tutorial, we'll show you how to organize your links using Bootstrap columns and add a distinctive functionality by linking to both the subpages of a website and their subcategories in one neat column.

Getting Started

Copy and paste the Bootstrap source links below to install Bootstrap in your project:

HTML

In the code below, we have three sectional boxes and each of them is labeled with a different color such as blue, red, and green. These will make up our three different columns. Each column has a link to the main page and a list of sub-links belonging to that page, for example, the last green column is a Departments column with a direct link to the main department page and underneath that, a list of department names. The main department link is inside an h2 heading and it is slightly spaced apart from its sublinks. This gives the users the option to both go to the departments' index page directly or select one of the individual departments.

CSS

Now that we built the HTML structure for the columns, it's time to set the layout, direction, and styling of the columns.

First, we make sure that we use Flexbox on the row elements. Flexbox is a CSS layout method that efficiently lays out, aligns and distributes elements. It saves a lot of time and frustration by eliminating the need for using floats and too many media queries for responsive layouts. We select all the row elements and the sectional-box elements inside them and give the attribute: display: flex;.

Then for the columns, we use flex-direction which is a Flexbox property that sets the direction of the main axis. Under .ct-sectional-box we add the property and value flex-direction: column. The flex direction is automatically set to row so we make sure now they're laid out in a column direction. We also set the same rule for screen sizes below desktop to ensure that the flexbox direction doesn't change. When the screen size is small, each column will automatically take up the full width. T

hen we add the styling by specifying the colors:

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