<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 ----------> <p class="text-center lead">Please remove this line =). <br>It will be better visualized in Bootstrap 3.2.0 Lumem Theme, to use lumem theme<br> please <a href="http://bootswatch.com/lumen/">visit the lumem theme page</a>. You can also, use bootstrap themes menu, just up here ^^. <br>To have access to a large icons list, please use <a href="http://fortawesome.github.io/">FontAwesome</a> instead of bootstrap default option (Glyphicons).</p> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="col-md-3"> <a class="btn btn-block btn-lg btn-success" data-toggle="modal" data-target="#mymodal"> <i class="fa fa-users" id="icone_grande"></i> <br><br> <span class="texto_grande"><i class="fa fa-plus-circle"></i> ADD Usuários</span></a> </div> <div class="col-md-3"> <a class="btn btn-block btn-lg btn-danger" data-toggle="modal" data-target="#mymodal"> <i class="fa fa-user" id="icone_grande"></i> <br><br> <span class="texto_grande"><i class="fa fa-times-circle-o"></i> DEL Usuários</span></a> </div> <div class="col-md-3"> <a class="btn btn-block btn-lg btn-primary" data-toggle="modal" data-target="#mymodal"> <i class="fa fa-cog fa-spin" id="icone_grande"></i> <br><br> <span class="texto_grande"><i class="fa fa-edit"></i> EDIT Usuários</span></a> </div> <div class="col-md-3"> <a class="btn btn-block btn-lg btn-warning" data-toggle="modal" data-target="#mymodal"> <i class="fa fa-pied-piper-alt" id="icone_grande"></i> <br><br> <span class="texto_grande"><i class="fa fa-list-ul"></i> LIST Usuários</span></a> </div> </div>

.texto_grande { font-size: 2.5rem; color: white; } #icone_grande { font-size: 8rem; color:#fff; }