zig zag user description

This bootstrap snippet called "zig zag user description" 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: user,list

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


                        
<section id="principal-content">
		<div class="container bootstrap snippet">
			<div class="row">
				<div class="col-md-12">
					<article>
						<header>
							<h2 class="text-primary">
                                <span class="glyphicon glyphicon-user"></span>    
                                Bootdey
                            </h2>	
						</header>
						<div class="row" id="design">
							<div class="col-md-4 col-md-offset-1">
									<div class="home-design-info">
										<figure>
											<img class="img-circle" src="https://bootdey.com/img/Content/HexGames349.jpg">
										</figure>
									</div>	
							</div> <!-- 4 -->	
							<div class="col-md-6">
								<div class="deets">
									<h3 class="text-primary"><span class="glyphicon glyphicon-arrow-right"></span> My personal description</h3>	
									<p>Hello, this is my personal description
                                        I am writing texts that come out of my mind
                                        in order not to lorem ipsum
                                        the following will say that bootdey is a gallery of snippets for bootstrap
                                        Csss Js HTML codes.</p>
								</div>
							</div>	
						</div> <!-- /row -->
						<div class="row" id="develop">
							<div class="col-md-4 col-md-push-7">	
								<div class="home-dev-info">
										<figure>
											<img class="img-circle" src="https://bootdey.com/img/Content/Smartypants3.jpg">
										</figure>
									</div>
							</div> <!-- col -->
							<div class="col-md-6 col-md-pull-3">
									<div class="deets">
									<h3 class="text-primary">Second step in my  description.<span class="glyphicon glyphicon-arrow-left"></span> </h3>	
									<p>
                                       Here too I put much text
                                        but not to use lorem ipsum I am writing this
                                        Once writing we will obtain a snippet
                                        Thanks to bootdey snippets Html Css Js    
                                    </p>
								</div>						
							</div> <!-- col -->	
						</div> <!-- /row -->
					</article>
				</div>	
			</div>	
		</div>
	</section>                    

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


                        

.home-design-info figure img, .home-dev-info figure img{
    width: 200px;
    height:200px;
}

#principal-content {
    background: none repeat scroll 0 0 #fff;
    padding: 0;
    position: relative;
    z-index: 980;
}

#principal-content #develop {
    margin: 1em 0;
    text-align: center;
}                    
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.1

Created: Jul 4th 2014, 01:23

Views: 3.5K

Rated 5/5 based on 2 reviews