Google choose an account style

This bootstrap snippet called "Google choose an account style" 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: account,user,list,choose

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-sm-6 col-md-5 col-md-offset-3">
            <img alt="Google" class="logo" src="//ssl.gstatic.com/accounts/ui/logo_2x.png"/>
            <div class="account-wall accountchooser">
                <h1 class="title">
                    Choose an account</h1>
                <ol class="accounts">
                    <li>
                        <button type="submit" name="Email" value="example@gmail.com">
                            <img class="account-image" alt="" src="https://bootdey.com/img/Content/avatar/avatar1.png"/>
                            <span class="account-name">Bhaumik Patel</span> <span class="account-email">example@gmail.com
                            </span>
                        </button>
                    </li>
                    <li>
                        <button type="submit" name="Email" value="example1@gmail.com">
                            <img class="account-image" alt="" src="https://bootdey.com/img/Content/avatar/avatar1.png"/>
                            <span class="account-name">Bhaumik Patel</span> <span class="account-email">example1@gmail.com
                            </span>
                        </button>
                    </li>
                </ol>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 col-md-5 col-md-offset-3">
            <div class="account-wall accountchooser action">
                <ul>
                    <li><a href="#">Add account </a></li>
                    <li><a href="#">Remove</a></li></ul>
            </div>
        </div>
    </div>
</div>
<p class="text-center"><a href="http://www.jquery2dotnet.com">By jquery2dotnet.com</a></p> 
                    

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

                        
.form-signin {
    max-width: 330px;
    padding: 15px;
    margin: 0 auto;
    padding-top: 5px;
}

.account-wall {
    margin-top: 20px;
    padding: 20px 25px 30px;
    background-color: #f7f7f7;
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}
.logo {
    margin: 25px auto 20px;
    float: none;
    display: block;
    height: 38px;
    width: 116px;
}

.title {
    font-size: 20px;
    color: #262626;
    margin: 0 0 15px;
    font-weight: normal;
}

.accountchooser ol {
    width: 100%;
    margin: 0;
    list-style: none;
    padding: 0;
}

.accountchooser ol li {
    height: 76px;
    border-top: 1px solid #d5d5d5;
}


.accountchooser ol li button {
    padding: 15px 0;
    display: block;
    width: 100%;
    height: 100%;
    outline: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    background: url(//ssl.gstatic.com/accounts/ui/arrow_right_1x.png) right center no-repeat;
    background-size: 21px 21px;
}

.accountchooser ol li button img {
    float: left;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 46px;
    width: 46px;
}

.accountchooser ol li button span.account-name {
    font-weight: bold;
    font-size: 16px;
    padding-top: 3px;
    color: #427fed;
}

.accountchooser ol li button span {
    display: block;
    margin-left: 58px;
    padding-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action {
    padding: 5px;
}

.action ul {
    width: 100%;
    margin: 0;
    list-style: none;
    padding: 0;
}

.action ul li:first-child {
    border-right: 1px solid #d5d5d5;
}

.action ul li {
    width: 49%;
    display: inline-block;
}

.action ul li a {
    color: #427fed;
    cursor: pointer;
    text-decoration: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    display: inline-block;
    background: none;
    text-align: center;
    padding: 12px 0;
    outline: none;
    text-decoration: none;
    border: 0;
}
                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.2.0

Created: Jul 16th 2014, 13:50

Views: 3.1K

Rated 5/5 based on 2 reviews