paristuzun / bootstrap-additional-link-boxes

bootstrap-additional-link-boxes

Often you need to add additional or relevant links to the bottom of your content. Do so with some style using some simple boxes and default bootstrap columns.

Tutorial

For detailed instruction's, view Solodev's How to Add Additional Links with Easy-to-Use Boxes Based on Bootstrap Columns article.

Demo

Try out a working example on JSFiddle.

HTML

The tutorial contains the following basic HTML markup.

<section class="tiles">
                <div class="container">
                    <div class="row">
                        <h2>Additional Links</h2>
                        <div class="row">
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Kepler<br>
                            Crater</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">HAB-1<br>
                            Facility
                            </a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Supply<br>
                            &amp; Centers</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Operational<br>
                            Locations</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Equatorial<br>
                            Regions</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Arctic<br>
                            Colonial<br>
                            Settlements</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Medical<br>
                            Services<br>
                            Facilities</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                            <div class="col-md-3 col-sm-4">
                                <div class="link-tiles"><a href="#">Community<br>
                            Activity<br>
                            Centers</a>
                                </div>
                                <!--.link-tiles-->
                            </div>
                        </div>
                    </div>
                    <!--.row-->
                </div>
                <!--.container-->
</section>

CSS

All required CSS is contained with style.css

External Resources

This tutorial includes the following third party resources.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">