Bootstrap snippet and html example. zig zag user description

Bootstrap 3.1.1 snippet "zig zag user description" with HTML, CSS, and JS. Copy, paste, and customize this responsive UI component for your project.
Tags: user,list

HTML code

Clean, semantic HTML that powers this Bootstrap 3.1.1 snippet. Copy and paste it into your page (with Bootstrap loaded) to reproduce the exact layout shown in the preview.

                        
<section id="principal-content">
		<div class="container bootstrap snippets bootdey">
			<div class="row">
				<div class="col-md-12">
					<article>
						<header>
							<h2 class="text-primary text-center">
                                Bootdey.com
                            </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 img-thumbnail" src="https://bootdey.com/img/Content/avatar/avatar7.png">
										</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 img-thumbnail" src="https://bootdey.com/img/Content/avatar/avatar6.png">
										</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>                    

CSS code

Scoped CSS that styles the component. Paste it after Bootstrap 3.1.1 to keep the design, spacing, and responsiveness consistent.

                        
body{
background:#eee;
}
.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;
}                    

Similar snippets

Bootstrap example and template. Recent blog post title

Recent blog post title

Bootstrap example and template. bs4 profile card

bs4 profile card

Bootstrap example and template. User profile with friends and chat

User profile with friends and chat

Bootstrap example and template. card members and profile

card members and profile

Bootstrap example and template. bs5 dark footer

bs5 dark footer

Bootstrap example and template. bs5 edit profile account details

bs5 edit profile account details

Bootstrap example and template. chat app

chat app

Bootstrap example and template. direct chat box

direct chat box

FAQ

How do I use this snippet?

Include Bootstrap 3.1.1, paste the HTML, add the CSS block, and include the JS (if any) to mirror the live preview.

Can I use it in commercial projects?

Yes. It’s free for personal and commercial work; check the snippets license for details.

Is it responsive?

Yes. It inherits the responsive grid and components from Bootstrap 3.1.1.

Bootstrap example and template. zig zag user description

About this bootstrap example/template

Optimized for copy‑paste: clean HTML, scoped CSS, and minimal JS so you can ship production‑ready UI faster and keep designs consistent.

Mobile‑first and responsive by default. Tested across modern browsers to reduce polish time on your project.

Already trusted in 11.7K+ views. Reuse this snippet to speed up landing pages, dashboards, or onboarding flows.

Bootstrap 3.1.1

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css'>

<script src='https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js'></script>

This code example is based on bootstrap 3.1.1 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working