Home menu

This bootstrap snippet called "Home menu" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: menu,dashboard,information

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="col-md-12 col-sm-12 col-xs-12">
    <div class="container bootstrap snippet">
    <div class="col-md-12">
        <h2 class="text-primary"> 
            <i class="fa fa-tachometer"></i>
            Home menu
        </h2>
        <hr>
        <div class="row">  
            <div class="col-md-3">
                <div class="panel panel-info ">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-6">
                                <i class="fa fa-calculator fa-5x"></i>
                            </div>
                            <div class="col-xs-6 text-right">
                                <p class="announcement-heading">&nbsp;</p>
                                <p class="announcement-text">Math</p>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer announcement-bottom">
                            <div class="row">
                                <div class="col-xs-6">View</div>
                                <div class="col-xs-6 text-right">
                                    <i class="fa fa-arrow-circle-right"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div> 
            <div class="col-md-3">
                <div class="panel panel-success ">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-6">
                                <i class="fa fa-leanpub fa-5x"></i>
                            </div>
                            <div class="col-xs-6 text-right">
                                <p class="announcement-heading">&nbsp;</p>
                                <p class="announcement-text">Language</p>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer announcement-bottom">
                            <div class="row">
                                <div class="col-xs-6">View</div>
                                <div class="col-xs-6 text-right">
                                    <i class="fa fa-arrow-circle-right"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div> 
            <div class="col-md-3">
                <div class="panel panel-warning ">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-6">
                                <i class="fa fa-flask fa-5x"></i>
                            </div>
                            <div class="col-xs-6 text-right">
                                <p class="announcement-heading">&nbsp;</p>
                                <p class="announcement-text">Science</p>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer announcement-bottom">
                            <div class="row">
                                <div class="col-xs-6">View</div>
                                <div class="col-xs-6 text-right">
                                    <i class="fa fa-arrow-circle-right"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div> 
            <div class="col-md-3">
                <div class="panel panel-danger ">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-6">
                                <i class="fa fa-video-camera fa-5x"></i>
                            </div>
                            <div class="col-xs-6 text-right">
                                <p class="announcement-heading">&nbsp;</p>
                                <p class="announcement-text">Video</p>
                            </div>
                        </div>
                    </div>
                    <a href="#">
                        <div class="panel-footer announcement-bottom">
                            <div class="row">
                                <div class="col-xs-6">View</div>
                                <div class="col-xs-6 text-right">
                                    <i class="fa fa-arrow-circle-right"></i>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div> 
            </div>
        </div>
    </div>
    <div class="col-md-12">     
      <div class="container bootstrap snippet">     
        <footer class="footer">
            <hr/>
            <p>&copy; Company name 2015</p>
        </footer>
      </div>
    </div>
</div>

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection


				                
body{margin-top:20px;}				              
                                    

Similar snippets

Bootstrap snippet bs4 navbar with dropdown animations

bs4 navbar with dropdown animations

View

Bootstrap snippet Gradients dashboard cards

Gradients dashboard cards

View

Bootstrap snippet news feed sidebaser with online users

news feed sidebaser with online users

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.2

Created: Feb 18th 2015, 08:56

Views: 3.8K

Rated 5/5 based on 4 reviews