WebCardInigoaap

This bootstrap snippet WebCardInigoaap 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

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


<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>

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


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%;
	}
	
}

                                    

This is the JS code for this bootstrap snippet

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


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:"trcmnhp@hotmail.com"},
											 {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:"tercumanbilisimmerkizi@gmail.com"},
											 {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"; } });
 
}]); 

Information about this bootstrap snippet

Creator: HARUN PEHLIVAN

Bootstrap version: 3.3.7

Created: Sep 19th 2017, 16:00

Views: 62