University of St Andrews

Navbox grid

The navbox grid pattern presents a set of navboxes in a grid.

• Navbox grid does not need to have all 3 boxes with content, it may have just 1 or 2 following a row of 3.
• Use a grid whenever presenting a group of navboxes.

Navbox 3 grid

<!-- Begin pattern: navbox-grid //-->

<div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-study.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="/study" class="big-target-anchor">Study at St&nbsp;Andrews</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="/research" class="big-target-anchor">Research</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-alumni.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="/alumni" class="big-target-anchor">Alumni and donors</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
            </div>
</div>

<!-- End pattern: navbox-grid //-->

Navbox 4 grid

<!-- Begin pattern: navbox-grid //-->

<div class="container">
                    <div class="row">
                        <div class="col-sm-8">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/750x240-001.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Why St&nbsp;Andrews</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    
                    
                        <div class="col-sm-4">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Research</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/360x240-alumni.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Alumni and donors</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    
                    
                        <div class="col-sm-8">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/750x240-002.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">The town</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    </div>
</div>

<!-- End pattern: navbox-grid //-->

Navbox 5 grid

<!-- Begin pattern: navbox-grid //-->

<div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/555x240-001.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Undergraduate</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    
                    
                        <div class="col-sm-6">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/555x240-002.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Postgraduate</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-4">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/360x240-8.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Schools</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    
                    
                        <div class="col-sm-4">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">About</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    
                    
                        <div class="col-sm-4">
                            <!-- Begin pattern: navbox //-->
                            
                            <div class="navbox big-target-click-zone">
                                    <div class="navbox-image">
                                        <img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="Description">
                                    </div>
                                <div class="navbox-title">
                                    <p><a href="#" class="big-target-anchor">Contact</a></p>
                                </div>
                            </div>
                            
                            <!-- End pattern: navbox //-->                        </div>
                    </div>
</div>

<!-- End pattern: navbox-grid //-->

Navbox 6 grid

<!-- Begin pattern: navbox-grid //-->

<div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-study.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Study at St&nbsp;Andrews</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Research</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-alumni.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Alumni and donors</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-1.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">About</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-5.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">People</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-7.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Contact</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
            </div>
</div>

<!-- End pattern: navbox-grid //-->

Navbox hidden

Option to disable the no. 2 and 3 or just the no. 3 navboxes using the bootstrap CSS helper class hidden.

<!-- Begin pattern: navbox-grid //-->

<div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-study.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Study at St&nbsp;Andrews</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Research</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-alumni.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Alumni and donors</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-study.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Study at St&nbsp;Andrews</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Research</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
                <div class="col-sm-4">
                    <!-- Begin pattern: navbox //-->
                    
                    <div class="navbox hidden big-target-click-zone">
                            <div class="navbox-image">
                                <img src="../../assets/docs/images/placeholders/360x240-research.jpg" alt="Description">
                            </div>
                        <div class="navbox-title">
                            <p><a href="#" class="big-target-anchor">Research</a></p>
                        </div>
                    </div>
                    
                    <!-- End pattern: navbox //-->                </div>
            </div>
</div>

<!-- End pattern: navbox-grid //-->