Bootstrap Admin Panel Quick Shortcuts Snippets

Cards Bootstrap 5Free+ CSS

Add a card to your UI with Bootstrap Admin Panel Quick Shortcuts Snippets. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

4.4k views68 downloads6 years ago

gosnippets.com/preview/bootstrap-admin-panel-quick-shortcuts-snippets

Source Code

1<div class="container">
2    <div class="row">
3        <div class="col-md-6">
4            <div class="panel panel-primary">
5                <div class="panel-heading">
6                    <h3 class="panel-title">
7                        <span class="glyphicon glyphicon-bookmark"></span> Quick Shortcuts</h3>
8                </div>
9                <div class="panel-body">
10                    <div class="row">
11                        <div class="col-xs-6 col-md-6">
12                          <a href="#" class="btn btn-danger btn-lg" role="button"><span class="glyphicon glyphicon-list-alt"></span> <br/>Apps</a>
13                          <a href="#" class="btn btn-warning btn-lg" role="button"><span class="glyphicon glyphicon-bookmark"></span> <br/>Bookmarks</a>
14                          <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-signal"></span> <br/>Reports</a>
15                          <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-comment"></span> <br/>Comments</a>
16                        </div>
17                        <div class="col-xs-6 col-md-6">
18                          <a href="#" class="btn btn-success btn-lg" role="button"><span class="glyphicon glyphicon-user"></span> <br/>Users</a>
19                          <a href="#" class="btn btn-info btn-lg" role="button"><span class="glyphicon glyphicon-file"></span> <br/>Notes</a>
20                          <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-picture"></span> <br/>Photos</a>
21                          <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-tag"></span> <br/>Tags</a>
22                        </div>
23                    </div>
24                    <a href="http://www.jquery2dotnet.com/" class="btn btn-success btn-lg w-100" role="button"><span class="glyphicon glyphicon-globe"></span> Website</a>
25                </div>
26            </div>
27        </div>
28    </div>
29</div>
30

More Cards snippets

Bootstrap carousel with cards in 3 columns

Bootstrap carousel with cards in 3 columns: a hand-crafted, open-source Bootstrap 5 card. HTML included, ready to copy.

CardsView →

Bootstrap 5 ecommerce product cards details template

Add a card to your UI with Bootstrap 5 ecommerce product cards details template. Free Bootstrap 5 code — HTML & CSS ready to copy, MIT licensed.

CardsView →

Bootstrap snippet Panels with nav tabs using HTML & CSS

Bootstrap snippet Panels with nav tabs using HTML & CSS — a free Bootstrap 5 card snippet. Copy the HTML & CSS and paste straight into your Bootstrap 5 project.

CardsView →

Comments(0)

No comments yet — be the first to start the discussion.

1<div class="container"> 2 <div class="row"> 3 <div class="col-md-6"> 4 <div class="panel panel-primary"> 5 <div class="panel-heading"> 6 <h3 class="panel-title"> 7 <span class="glyphicon glyphicon-bookmark"></span> Quick Shortcuts</h3> 8 </div> 9 <div class="panel-body"> 10 <div class="row"> 11 <div class="col-xs-6 col-md-6"> 12 <a href="#" class="btn btn-danger btn-lg" role="button"><span class="glyphicon glyphicon-list-alt"></span> <br/>Apps</a> 13 <a href="#" class="btn btn-warning btn-lg" role="button"><span class="glyphicon glyphicon-bookmark"></span> <br/>Bookmarks</a> 14 <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-signal"></span> <br/>Reports</a> 15 <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-comment"></span> <br/>Comments</a> 16 </div> 17 <div class="col-xs-6 col-md-6"> 18 <a href="#" class="btn btn-success btn-lg" role="button"><span class="glyphicon glyphicon-user"></span> <br/>Users</a> 19 <a href="#" class="btn btn-info btn-lg" role="button"><span class="glyphicon glyphicon-file"></span> <br/>Notes</a> 20 <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-picture"></span> <br/>Photos</a> 21 <a href="#" class="btn btn-primary btn-lg" role="button"><span class="glyphicon glyphicon-tag"></span> <br/>Tags</a> 22 </div> 23 </div> 24 <a href="http://www.jquery2dotnet.com/" class="btn btn-success btn-lg w-100" role="button"><span class="glyphicon glyphicon-globe"></span> Website</a> 25 </div> 26 </div> 27 </div> 28 </div> 29</div> 30