Locked Screen

Bootstrap snippet. Locked Screen, this snippet 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: bootstrap,snippet,locked,screen

HTML code

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

<div class="container bootstrap snippet">
    	<div class="row">
			<div class="col-sm-8 col-md-5 col-md-offset-4">
				<div class="panel panel-success panel-circle">
					<div class="panel-body">
						<form role="form" action="#" method="POST">
                                <div class="row text-center">
                                    <p class="bg-success title">Daniel snathanson</p>
								<div class="row">
									<div class="center-block">
										<img class="profile-img img-thumbnail" src="https://bootdey.com/img/Content/User_for_snippets.png" alt="">
								<div class="row">
									<div class="col-sm-12 col-md-10  col-md-offset-1 ">
										<div class="form-group">
											<div class="input-group text-center">
    										        Lorem Ipsum is simply dummy text of the printing and typesetting industry printing. 
                                                    Donec non dignissim eros
										<div class="form-group">
											<div class="input-group">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-lock"></i>
												<input class="form-control" placeholder="Password" name="password" type="password" value="" autofocus>
										<div class="form-group">
                                            <button type="submit" class="btn btn-lg btn-success btn-block">
                                                <i class="glyphicon glyphicon-share-alt"></i>

CSS code

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


    -moz-border-radius: 20%;
    -webkit-border-radius: 20%;
    border-radius: 20%;
    box-shadow: 5px 5px 0 rgba(0,0,0,0.08);

.panel-heading {
    padding: 5px 15px;

.panel-footer {
    padding: 1px 15px;
	color: #A0A0A0;

.profile-img {
	width: 96px;
	height: 96px;
	margin: 0 auto 10px;
	display: block;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;

Similar snippets

Bootstrap snippet locked screen page

locked screen page


Bootstrap snippet Material design for Bootstrap 3 bootdey

Material design for Bootstrap 3 bootdey


Bootstrap snippet Chat box

Chat box


About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.1

Created: Nov 3rd 2014, 20:13

Views: 5.6K

Rated 5/5 based on 2 reviews