user list inside narrow jumbotron

This bootstrap snippet called "user list inside narrow jumbotron" 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: list,user

This is the HTML code for this bootstrap snippet

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


<link href="https://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="container bootstrap snippet">
  <div class="header">
    <h3 class="text-muted prj-name">
        <span class="fa fa-users fa-2x"></span>
        Users 
    </h3>
  </div>

  <div class="jumbotron" style="min-height:400px;height:auto;">
    <ul class="list-group">
        <li class="list-group-item user-item text-left">
            <img class="img-circle img-user " src="https://bootdey.com/img/Content/user-453533-fdadfd.png">
            <h3>
                <a href="#">Bootdey bootstrap</a><br>
                <a class="btn btn-info">
                    <span class="glyphicon glyphicon-share-alt"></span>View
                </a>
            </h3>     
        </li>
        <li class="list-group-item user-item text-left">
            <img class="img-circle img-user " src="https://bootdey.com/img/Content/Smartypants3.jpg">
            <h3>
                <a href="#">A.j from farly good parents</a><br>
                <a class="btn btn-info">
                    <span class="glyphicon glyphicon-share-alt"></span>View
                </a>
            </h3>  
        </li>
        <li class="list-group-item user-item text-left">
            <img class="img-circle img-user " src="https://bootdey.com/img/Content/Twitter_bird_icon.png">
            <h3>
                <a href="#">Twitter man</a><br>
                <a class="btn btn-info">
                    <span class="glyphicon glyphicon-share-alt"></span>View
                </a>
            </h3>  
        </li>
    </ul>
  </div>
  </div>
</div>                                                            

This is the CSS code for this bootstrap snippet

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


.jumbotron .btn {
    color:#FFFFFF; 
    padding: 5px !important;
    font-size: 12px !important; 
    margin-left:20px;
}
.jumbotron label {
    font-size:12px;    
}

.img-user{
    height:120px;
    width:120px;
}

.prj-name{
    font-weight:bold;
    color:#5bc0de;
}

.user-item img, .user-item h3 {
    display:inline-block;    
}
 
.jumbotron .btn .user-item h3 a{
    color:#5bc0de; 
    padding: 5px !important;
    font-size: 12px !important; 
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jul 7th 2014, 18:16

Views: 4.0K

Rated 5/5 based on 5 reviews