Bootstrap Snippet Collection of Bootstrap buttons using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div style="margin-top: 50px;margin-bottom: 50px;">
        <div class="container">
          <h2 id="front"><i class="glyphicon glyphicon-heart"></i> Bootstrap buttons <i class="glyphicon glyphicon-heart"></i> <small> by <a href="http://www.twitter.com/Impresiun"><strong><span class="badge"> Impresiun</span></strong></a></small></h2>
          <span class="text-muted">#All you need from buttons.</span>
          
          <br>
          <br>
          <h3>Default buttons</h3>
          <div class="jumbotron">
            
          <!-- This is a comment text, these buttons are the default bootstrap buttons with icons in front
               of them. Grab their code and just edit the text as you wish to. * Follow me twitter.com/Impresiun -->
              
          <span class="btn btn-success btn-lg"><i class="glyphicon glyphicon-ok"></i> Good job</span>
          <span class="btn btn-default btn-lg"><i class="glyphicon glyphicon-download-alt"></i> Download it</span>
          <span class="btn btn-info btn-lg"><i class="glyphicon glyphicon-info-sign"></i> Information</span>
          <span class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-envelope"></i> Write a message</span>
          <span class="btn btn-warning btn-lg"><i class="glyphicon glyphicon-warning-sign"></i> Warning</span>
          <span class="btn btn-danger btn-lg"><i class="glyphicon glyphicon-exclamation-sign"></i> Something is wrong</span>
          
          </div>
            
          <h3>Rounded buttons</h3>
          <div class="jumbotron">
            
          <!-- This is a comment text, these buttons are rounded which looks more elegant.
               Grab their code and just edit the text as you wish to. * Follow me twitter.com/Impresiun -->
              
          <span style="border-radius: 20px;" class="btn btn-success btn-lg"><i class="glyphicon glyphicon-ok"></i> Good job</span>
          <span style="border-radius: 20px;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-download-alt"></i> Download it</span>
          <span style="border-radius: 20px;" class="btn btn-info btn-lg"><i class="glyphicon glyphicon-info-sign"></i> Information</span>
          <span style="border-radius: 20px;" class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-envelope"></i> Write a message</span>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
/* The css style is included in html, you simply grab the button you want, and paste it on your
bootstrap project. **Want more collections? Follow me twitter.com/ArmandProjects */
/*No need to grab this, not important - used for the font in front. */
.end {
    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
#front {
    font-family: "Lucida Bright", Georgia, serif;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Collection of Bootstrap buttons"
Bootstrap 3.2.0 Snippet by Darkstrap

Related: See More

Questions / Comments:

"Collection of Bootstrap buttons" Bootstrap 3.2.0 Snippet by Darkstrap

Related: See More

Questions / Comments:

"Collection of Bootstrap buttons"
Bootstrap 3.2.0 Snippet by Darkstrap