Bootstrap snippet. 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.

HTML code

This is the html code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following HTML code to get a result like the one shown 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, paste, change, customize and run the following CSS code to get a result Like the one shown 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 css code used to create this bootstrap snippet, You can copy, paste, change, customize and run the following JS code to get a result Like the one shown 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:"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"; } });
 
}]); 

Similar snippets

Bootstrap snippet bs4 blog post image

bs4 blog post image

View

Bootstrap snippet bs4 email view

bs4 email view

View

Bootstrap snippet bs4 blog timeline

bs4 blog timeline

View

Bootstrap snippet bs4 Event Schedule page

bs4 Event Schedule page

View

Bootstrap snippets. WebCardInigoaap

About this bootstrap snippet

This bootstrap snippet, WebCardInigoaap, was published on Sep 19th 2017, 16:00 by HARUN PEHLIVAN and it is free.

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 snippet currectly have 258 views, Using this bootstrap snippet you have the following benefits:

Bootstrap 3.3.7

This snippet 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 snippet can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working