simple user cards contact info

This bootstrap snippet called "simple user cards contact info" 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: html,css

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

<div class="container bootstrap snippet">
    <div class="row">
		<div class="col-md-4">
            <div class="widget lazur-bg p-xl">
                <h2>Janet Smith</h2>
                <ul class="list-unstyled m-t-md">
                    <li>
                        <span class="fa fa-envelope m-r-xs"></span>
                        <label>Email:</label>
                        mike@mail.com
                    </li>
                    <li>
                        <span class="fa fa-home m-r-xs"></span>
                        <label>Address:</label>
                        Street 200, Avenue 10
                    </li>
                    <li>
                        <span class="fa fa-phone m-r-xs"></span>
                        <label>Contact:</label>
                        (+121) 678 3462
                    </li>
                </ul>
            </div>   
		</div>
		<div class="col-md-4">
            <div class="widget red-bg p-xl">
                <h2>Deyson Bejarano</h2>
                <ul class="list-unstyled m-t-md">
                    <li>
                        <span class="fa fa-envelope m-r-xs"></span>
                        <label>Email:</label>
                        deyson@mail.com
                    </li>
                    <li>
                        <span class="fa fa-home m-r-xs"></span>
                        <label>Address:</label>
                        Street 200, Avenue 10
                    </li>
                    <li>
                        <span class="fa fa-phone m-r-xs"></span>
                        <label>Contact:</label>
                        (+121) 678 3462
                    </li>
                </ul>
            </div>   
		</div>
		<div class="col-md-4">
            <div class="widget navy-bg p-xl">
                <h2>Briant Mckenly</h2>
                <ul class="list-unstyled m-t-md">
                    <li>
                        <span class="fa fa-envelope m-r-xs"></span>
                        <label>Email:</label>
                        bmkenly@mail.com
                    </li>
                    <li>
                        <span class="fa fa-home m-r-xs"></span>
                        <label>Address:</label>
                        Street 200, Avenue 10
                    </li>
                    <li>
                        <span class="fa fa-phone m-r-xs"></span>
                        <label>Contact:</label>
                        (+121) 678 3462
                    </li>
                </ul>
            </div>   
		</div>
	</div>
    <div class="row">
    	<div class="col-md-4">
            <div class="widget yellow-bg p-xl">
                <h2>Carlos simptho</h2>
                <ul class="list-unstyled m-t-md">
                    <li>
                        <span class="fa fa-envelope m-r-xs"></span>
                        <label>Email:</label>
                        clossimp@mail.com
                    </li>
                    <li>
                        <span class="fa fa-home m-r-xs"></span>
                        <label>Address:</label>
                        Street 200, Avenue 10
                    </li>
                    <li>
                        <span class="fa fa-phone m-r-xs"></span>
                        <label>Contact:</label>
                        (+121) 678 3462
                    </li>
                </ul>
            </div>   
		</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

body{margin-top:20px;}

.p-xl {
  padding: 40px;
}

.lazur-bg {
  background-color: #23c6c8;
  color: #ffffff;
}

.red-bg {
  background-color: #ed5565;
  color: #ffffff;
}

.navy-bg {
  background-color: #1ab394;
  color: #ffffff;
}

.yellow-bg {
  background-color: #f8ac59;
  color: #ffffff;
}

.widget {
  border-radius: 5px;
  padding: 15px 20px;
  margin-bottom: 10px;
  margin-top: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16), 0 2px 10px rgba(0, 0, 0, 0.12);
}

.widget h2, .widget h3 {
  margin-top: 5px;
  margin-bottom: 0;
  border-bottom:1px dotted white;
}

.m-t-md {
  margin-top: 20px;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: Jun 28th 2015, 19:19

Views: 2.8K

Rated 5/5 based on 1 reviews