Bootstrap snippet and html example. WebCardInigoaap

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.

HTML code

This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection


<html ng-app="inigoTeamApp">
    <head>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.0/angular-material.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

	</head>
	<body>
		<md-content id="body" class="full-height mobile-mode"  ng-controller="webCardController">
			<div id="wrapper" class="content-box">
				<div class="main-content layout-gt-sm-row">
					<div id="primary">
						<div class="shadow" ng-style="{background: cardDetails.colorCode}">
								<div id="cardHeader" class="navbar card-background navbar-fixed-top">
											<div class="layout-row layout-align-space-between">
												<span class="profileName">{{cardDetails.title == ''? "Card Title" : cardDetails.title}}</span>
												<button class="btn btn-success" ng-click="toggleSavePopup()"><b>SAVE</b></button>
											</div>
								</div>
							<div>
								<div id="cardBody">
									<img class="cover" alt="" src="{{cardDetails.backgroundPictureURL}}" />
								</div>
								<div id="cardUserDetails">
									<img class="avatar" alt="{{cardDetails.accountUserFirstName}}" src="{{cardDetails.pictureURL}}" />
									<span class="accountName">{{cardDetails.accountUserFirstName + " " + cardDetails.accountUserLastName}}</span>
								</div>
								<div id="cardFooter" class="layout-row layout-align-start-center">
										<img class="logo" ng-src="{{cardDetails.logo}}">
										<span class="profileDescription">{{cardDetails.description}}</span>
								</div>
							</div>
								<!-- ****Save Menu**** -->
								<div class="navbar card-background navbar-fixed-top save-pop-up popup-save-hide popup" ng-style="{height: height}" ng-hide="!isPopupSave" style="color:white">
									 <div class="layout-row layout-align-space-between-center" style="margin:9px">
										 <div class="layout-row layout-align-start-center">
											 <img class="popup-avatar" ng-src="{{cardDetails.pictureURL}}" />
											 <div>
													<h4>{{cardDetails.title}}</h4>
													<p style="line-height: 0.05;">{{cardDetails.accountUserFirstName + " " + cardDetails.accountUserLastName}}<p>
											 </div>
										 </div>
										 <i class="fa fa-times md-margin" aria-hidden="true" ng-click="toggleSavePopup()" style="font-size:20px" ng-if="operation == 'NONE'"></i>
										 <i class="fa fa-times md-margin" aria-hidden="true" ng-click="setOperation('NONE')" style="font-size:20px" ng-if="operation != 'NONE'"></i>

									</div>
									<div class="layout-row layout-align-space-between-center cssFade" style="margin:16px 9px" ng-click="setOperation('SAVE')" ng-hide="operation != 'NONE'">
										 <div class="layout-row layout-align-start-center">
											 <i class="fa fa-mobile popup-icon-mobile" aria-hidden="true"></i>
											 <div>
													<p style="font-size:small"><b>Save this contact to your phone</b></p>
													<p style="line-height: 0.9;font-size:small">Will be saved as a card, stored in your phonebook<p>
											 </div>
										 </div>
										 <i class="fa fa-angle-right md-margin" aria-hidden="true"></i>
									</div>
									<div class="layout-row layout-align-space-between-center cssFade" style="margin:16px 9px" ng-click="setOperation('SEND')" ng-hide="operation != 'NONE'">
										 <div class="layout-row layout-align-start-center">
											 <i class="fa fa-user popup-icon-user" aria-hidden="true"></i>
											 <div>
													<p style="font-size:small"><b>Send your contact details back</b></p>
													<p style="line-height: 0.9;font-size:small">This contact would like to know more about you<p>
											 </div>
										 </div>
										 <i class="fa fa-angle-right md-margin" aria-hidden="true"></i>
									</div>

									<!-- ****Save contact details**** -->
									<div class="full-height cssFade" ng-show="operation == 'SAVE'">
										<br />
										<h5 style="text-align:center">SAVE THIS CONTACT TO YOUR PHONE</h5>
										<br /><br /><br />
										<section class="full-width">
											<div class="embed-responsive embed-responsive-16by9">
													<iframe width="560" height="315" src="https://www.youtube.com/embed/GTT5cH-mEZA" frameborder="0" allowfullscreen></iframe>
											</div>
										</section><br /><br /><br />
										<div class="layout-column layout-align-center-center">
											<button class="btn btn-info"><b>SAVE TO PHONE BOOK</b></button>
										</div>
									</div>

									<!-- ****Send contact details**** -->
									<div class="layout-column layout-align-center-center cssFade full-height" ng-show="operation == 'SEND'">
										<br/>
										<header style="text-align:center">
											<h5>SEND YOUR CONTACT DETAILS BACK</h5>
											<h6>Enter as much detail as you want to send</h6>
										</header>
										<br/>
										<form id="contactDetails" class="full-height" style="width:85%">
													<md-input-container class="md-icon-float md-block">
														<md-icon>account_circle</md-icon>
														<input type="text" placeholder="Enter First and Last Name">
													</md-input-container>

													<md-input-container md-no-float class="md-block">
														<md-icon>work</md-icon>
														<input type="text" placeholder="Job Title/Position">
													</md-input-container>

													<md-input-container md-no-float class="md-block">
														<md-icon>email</md-icon>
														<input type="text" placeholder="Enter Email Address">
													</md-input-container>

													<md-input-container md-no-float class="md-block">
														<md-icon>phone</md-icon>
														<input type="text" placeholder="Enter Phone Number">
													</md-input-container>

													<br/>
													<div class="layout-column layout-align-center-center">
														<button class="btn btn-info"><b>SEND TO CONTACT</b></button>	
													</div>
										</form>
									</div>
								</div>
						</div>
					</div>
					<md-card class="card-elements shadow">
						<md-list class="elements-list cssFade no-padding" ng-hide="showOneElement">
							<md-list-item class="md-2-line" ng-repeat="templateElement in cardDetails.elements" ng-click="selectElement(templateElement)">
								<img class="element-avatar" ng-src="{{templateElement.pictureURL}}" />
								<div class="md-list-item-text preview-card-elements-text">
									<h3 style="font-size: 15px; height:16px">{{templateElement.text}}</h3>
									<p style="line-height: 2.05;">{{templateElement.url}}<p>
								</div>
							</md-list-item>
						</md-list>
					</md-card>
			</div>
			<br/>
				<!-- ****Card Footer**** -->
			<div id="footer">
				<div class="footerInternal">
					<div class="image-gradient-header"></div> 
						<div class="layout-column layout-align-center-center">
							<p class="footer-text">{{cardDetails.footer.text1}}</p>
								<div class="layout-gt-xs-row">
									<img src="{{cardDetails.footer.picture1URL}}" class="footer-img" />
									<img src="{{cardDetails.footer.picture2URL}}" class="footer-img" />
								</div>
							<p class="footer-constant-text">Powered By HP IT GURUP| 2017 © All Rights Reserved</p>
						</div>
					</div>
				</div>
			</div>
		</md-content>
		
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js"></script>
				<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-route.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-aria.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.7.1/angular-material-icons.min.js"></script>

	</body>
</html>

CSS code

This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection


html {
    background-color: #fff;
    margin: 0;
    padding: 0;
    font-size: 18px;
}

body {
    background-color: #fff;
    /*border-top: solid 10px #000;*/
    color: #333;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: normal;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

.full-screen{
    height:100%;			
	width:100%;
}

.full-height{
	height:100%;			
}

.no-padding {
	padding:0;
}

.shadow{
	    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px 0px, rgba(0, 0, 0, 0.137255) 0px 1px 1px 0px, rgba(0, 0, 0, 0.117647) 0px 2px 1px -1px;
}

.full-width{		
	width:100%;
}

.card-elements {
    overflow-y: scroll;
    max-width: 37%;
	  max-height: 716.92px;
	  position: relative;
		width:400px;
}
	
.elements-list {
   	position: absolute;
    top: 0;
		max-width: 100%;
}

.card-background{
	background-color: rgb(31, 67, 82);	
}

#primary {
	width: 100%;
  float: none;
  margin: 8px;
  border-radius: 0;
	max-width: 860px;
}

.content-box {
  padding-top: 60px;
  padding-bottom: 60px;
  /* max-height: 840px; */
}

.main-content {
	margin:auto;
	max-width: 1280px;
	margin-bottom: 65px;
}

#cardHeader {
	display: table;
	padding-top:17px;
	padding-right:24px;
	padding-left:16px;
	height:60px;
	width: 100%;
	box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.4);
}

#cardHeader .profileName {
	position: relative;
	font-size:1.2em;
	color: white;
	top: 2px;
	word-wrap: break-word;
	max-width: 280px;
	padding: 0 25px;
}


#cardHeader #profileLogo {
	width: 100%;
}

#cardBody {
	position:relative;
	background-color: blue;
	display: block;
	max-width: 860px;
}

#cardBody .cover{
	display:block;
	width:100%;
	min-height:250px;
	max-height: 643px;
  max-width: 860px;
}

#cardBody .profileDetails {
	position:absolute;
	width:100%;
	bottom: 0;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0) 43%, rgba(0,0,0,0.5) 44%, rgba(0,0,0,0.5) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(43%,rgba(0,0,0,0)), color-stop(44%,rgba(0,0,0,0.5)), color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,rgba(0,0,0,0.5) 44%,rgba(0,0,0,0.5) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 ); /* IE6-9 */
	z-index: 1;
	min-height: 75px;
}


#cardBody .profilePicture {
	position: absolute;
	display: inline-block;
	width: 75px;
	height: 75px;
	/*border: 1pt solid #000000;*/
	box-shadow: 0px 0px 14px 4px rgba(0,0,0,0.50);
	border-radius: 50%;
	bottom:3px;
	left:27px;
}

#cardFooter {
	padding: 20px 100px 20px 10px;
  text-align: left;
  color: white;
  word-wrap: break-word;
  min-height: 60px;
}

#cardUserDetails {
	padding: 20px 100px 20px 10px;
  text-align: left;
  color: white;
  word-wrap: break-word;
  min-height: 60px;
	background-color: rgb(4, 22, 43);
	position: relative;
}

#cardUserDetails .avatar {
    display: inline-block;
    width: 20%;
		max-width: 100px;
		border: medium solid #fff;
    margin-left: 15px;
    border-radius: 50%;
	  position: absolute;
    bottom: 14px;
}

#cardUserDetails .accountName {
	position: absolute;
	bottom: 5px;
	font-size: 20px;
	color: white;
	margin-left: 25px;
	left: 110px;
	word-break: break-all;
}

#cardUserDetails.lighter {
	background-color: rgb(31, 67, 82) -50%
}

#cardFooter .logo {
	  max-height: 50px;
    margin-right: 24px;
    display: inline-block;
    width: 20%;
    max-width: 100px;
    border: medium solid #fff;
    margin-left: 15px;
    bottom: 3px;
}

#wrapper {
	min-height: 100%;
	position: relative;
}

#footer {
	  width: 100%;
    height: 100px;
    position: absolute;
    bottom: 33px;
    left: 0;
}

.footerInternal{
	position:relative;
	text-align: center;
}

.element-avatar {
	-webkit-box-flex: 0;
   width: 48px;
   height: 48px;
   flex: 0 0 auto;
	margin-right: 13px;
}

.selected-element-avatar {
	-webkit-box-flex: 0;
   width: 148px;
   height: 148px;
   flex: 0 0 auto;
	margin-right: 13px;
}

.image-gradient-header {
	  position: absolute;
    width: 100%;
    opacity: 0.4;
    bottom: 0px;
    height: 145px;
    background-repeat: repeat-x;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#272727), to(rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, #272727, rgba(0,0,0,0));
    background: -moz-linear-gradient(top, #272727, rgba(0,0,0,0));
    background: -ms-linear-gradient(top, #272727, rgba(0,0,0,0));
    background: -o-linear-gradient(top, #272727, rgba(0,0,0,0));
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.footer-img {
	height: 55px;
	width: 130px;
  margin: 20px;
  margin-top: 8px;
}

.footer-gradient {
	position: relative;
  width: 100.08%;
  padding: 0 !important;
  margin: 0;
  right: 1px;
}

.footer-text {
	font-size: smaller;
	font-family: cursive;
	color: black;
}

.footer-constant-text {
	font-size: 10px;
	font-family: cursive;
	font-weight: bold;
  color: black;
}

.card-footer {
	text-align:center;
	color:white;
}

.btn-custom {
    color: #fff;
    background-color: rgb(31, 67, 82);
    border-color: #fff !important;
    width: 100px;
    border-radius: 20px !important;
    padding: 3px !important;
}

.save-pop-up{
	  /* height: 185px; */
    background-color: rgb(31, 67, 82);
    width: 100%;
}

.popup-avatar {
	  height: 40px;
    width: 40px;
    border-radius: 30px;
    margin: 0 14px;
}

.popup-icon-mobile {
		font-size: 48px;
    margin: 0 24px;
}

.popup-icon-user {
		font-size: 36px;
    margin: 0 20px;
}

@media (min-width: 960px){
	.popup {
	  left: 65% !important;
    max-width: 35% !important;
	  position: absolute !important;
	}	
}

.footer-popup-btn {
	  position: absolute;
    width: 100%;
    height: 8%;
    text-align: center;
		bottom:0;
}


.showme{ 
display: none !important;
}
.showhim:hover .showme{
display : block !important;
}

.popup-save-hide {
 	-webkit-transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
 	-moz-transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
 	-o-transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
 	transition:all cubic-bezier(0, 1, 0.5, 1) 1s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
}

.popup-save-hide.ng-hide {
  top: -100%;
  opacity:0;
  padding:0 10px;
	height: 0;
}

.cssFade {
    transition: 0.5s linear all;
    opacity: 1;
}
.cssFade.ng-hide {
    opacity: 0;
}

@media (min-width: 820px){
	
	.layout-gt-sm-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
	}
	
	.layout-gt-sm, .layout-gt-sm-column, .layout-gt-sm-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
	
	.layout-gt-sm-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    flex-direction: row;
	}
	
	.layout-gt-sm, .layout-gt-sm-column, .layout-gt-sm-row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
	}
}

@media (max-width: 820px) {
	.card-elements {
    overflow-y: hidden;
    max-width: 100%;
		width:100%;
		margin:0;
		box-shadow: white 0 0 0 0;
		position:relative;
	}
	
	.elements-list {
   	position: relative;
	}
	
	#primary {
		margin:0 !important;
	}
	
	.mobile-mode {
		background-color: white;
	}
	
	.card-elements {
	  max-height: 100%;
	}
	
}

Javascript/Jquery code

This is the javascript code used to create this bootstrap snippet, You can copy and paste the following javascript code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection


var app = angular.module('inigoTeamApp', ['ngMaterial','ngAnimate']);

app.controller('webCardController', ['$scope','$timeout', '$document', function($scope, $timeout, $document) {
    
	var long_para = "Paragraphs are the building blocks of papers. Many students define paragraphs in terms of length: a paragraph is a group of at least five sentences, a paragraph is half a page long, etc. In reality, though, the unity and coherence of ideas among sentences is what constitutes a paragraph. A paragraph is defined as “a group of sentences or a single sentence that forms a unit” (Lunsford and Connors 116). Length and appearance do not determine whether a section in a paper is a paragraph. For instance, in some styles of writing, particularly journalistic styles, a paragraph can be just one sentence long. Ultimately, a paragraph is a sentence or group of sentences that support one main idea. In this handout, we will refer to this as the “controlling idea,” because it controls what happens in the rest of the paragraph.";
  
	var elements_list = [{elementID: 1, pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_chrome.png", text: "Visit our Website", url:"harunpehlivantebimtebitagem.ml"}, 															 {elementID: 2,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_phone.png", text: "Give me a Call", url:"+90 358 417 62 30"},
											 {elementID: 3,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_youtube.png", text: "What is Inigo", url:"harunpehlivan1"},
											 {elementID: 4,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_linkedin.png", text: "Add me on LinkedIn", url:"harun-pehlivan-0aa34252"},
											 {elementID: 5,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_gmail.png", text: "Send me a mail", url:"[email protected]"},
											 {elementID: 6,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_skype.png", text: "Call me on Skype", url:"trcmnhp"},
											 {elementID: 7,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_twitter.png", text: "Follow me on twitter", url:"HTERCUMANP"},
											 {elementID: 8, pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_chrome.png", text: "Visit our Website", url:"harunpehlivantebimtebitagem.ml"}, 															 	 {elementID: 9,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_phone.png", text: "Give me a Call", url:"+90 358 417 62 30"},
											 {elementID: 10,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_youtube.png", text: "What is Inigo", url:"harunpehlivan1"},
											 {elementID: 11,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_linkedin.png", text: "Add me on LinkedIn", url:"harun-pehlivan-0aa34252"},
											 {elementID: 12,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_gmail.png", text: long_para, url:"[email protected]"},
											 {elementID: 13,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_skype.png", text: "Call me on Skype", url:"trcmnhp"},
											 {elementID: 14,pictureURL:"https://d3vvd7gre8315u.cloudfront.net/m/images/ic_twitter.png", text: "Follow me on twitter", url:"HTERCUMANP"},];
	
	var footer = {
		picture1LinkURL:"https://harunpehlivantebimtebitagem.carrd.co",
		picture1URL:"https://dvz7s77q059yk.cloudfront.net/content/images/Footer/83a0836c-f199-4a73-bd0a-63ab55a7ec48_bg_boston.png",
		picture2LinkURL:"https://harunpehlivantebimtebitagem.carrd.co",
		picture2URL:"https://dvz7s77q059yk.cloudfront.net/content/images/Footer/3c2a6d73-9d04-44f2-acdc-4f0ed06b2f7e_leftnav_inigo_partner_logo.png",
		publicProfileFooterID:28,
		templateID:0,
		text1:"Start for Free and Customize Your Digital Business Card Today"
	};

	
	$scope.cardDetails = {
		accountID: 18,
		accountUserFirstName: "HARUN",
		accountUserLastName: "PEHLİVAN",
		backgroundPictureURL: "http://d2f0ora2gkri0g.cloudfront.net/bkpam2342416_argeprojeegitimesnasndahallerim-1.jpg",
		colorCode: "rgb(31, 67, 82)",
		description: "TERCUMAN BİLİŞİM MERKEZİ & TERCUMAN EĞİTİM BİLİM TEKNİK ARAŞTIRMA GELİŞTİRME MERKEZİ",
		elements : elements_list,
		logo: "http://images.ticiz.com/2603690_w0_h120_hnn1i...bv9ettdv9dsbugw0py.png",
		pictureURL: "http://www.doyoubuzz.com/var/users/_/2016/11/15/18/1300826/avatar/1253797/avatar_cp_630.jpg?t=1505286021",
		title:"Digital Business Card",
		publicProfileID: 207070,
		footer: footer
	};
	
	$scope.isPopupSave = false;
	$scope.height = '230px';
	$scope.operation = 'NONE';
	$scope.showOneElement = false;
	$scope.selectedElement = null;
	$scope.isCardFooter = false;
	
	$scope.setCardFooter = function (){
			$scope.isCardFooter = !$scope.isCardFooter;	
	}

	$scope.toggleSavePopup = function(){
		$scope.isPopupSave = !$scope.isPopupSave;
	}
	
	$scope.selectElement = function(element){
		$scope.showOneElement = true;
		$scope.selectedElement = element;
	}
	
	$scope.closeElement = function(){
		$scope.selectedElement = null;
		$scope.showOneElement = false;
	}
	
	$scope.setOperation = function(operation){
		$scope.operation = 'TEMP';
		$timeout(function () {
			$scope.operation = operation;
		},700);
		if (operation == 'NONE')
			popupNormal();
		else
			popupFull();
	}
	
	var popupFull = function(){
		$scope.height = '100%';
	}
	
	var popupNormal = function(){
		$scope.height = '230px';
	}

	
	$document.ready(function() { if ($document.getElementById('content').scrollHeight < $document.body.clientHeight){ $document.getElementById('footer').style.position = "fixed"; 
																																																										$document.getElementById('footer').style.bottom = "0"; } });
 
}]); 

Similar snippets

Bootstrap example and template. dark invoice

dark invoice

Bootstrap example and template. Wishlist profile

Wishlist profile

Bootstrap example and template. Social network message pages

Social network message pages

Bootstrap example and template. dashboard user block

dashboard user block

Bootstrap example and template. profile with followers with cover photo

profile with followers with cover photo

Bootstrap example and template. profile videos

profile videos

Bootstrap example and template. bs4 crud users

bs4 crud users

Bootstrap example and template. Form register inside narrow jumbotron

Form register inside narrow jumbotron

Bootstrap example and template. WebCardInigoaap

About this bootstrap example/template

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This code example currectly have 846 views, Using this bootstrap snippet you have the following benefits:

Bootstrap 3.3.7

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

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

This code example is based on bootstrap 3.3.7 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

Jquery plugins

Great built-in plugins with jquery framework, you can easy to change all declarations

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