"Bootstrap Profile Page"
Bootstrap 4.0.0 Snippet by CreativeTim

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"> <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons"> <link rel="stylesgeet" href="https://rawgit.com/creativetimofficial/material-kit/master/assets/css/material-kit.css"> </head> <body class="profile-page"> <nav class="navbar navbar-color-on-scroll navbar-transparent fixed-top navbar-expand-lg " color-on-scroll="100" id="sectionsNav"> <div class="container"> <div class="navbar-translate"> <a class="navbar-brand" href="../index.html">Material Kit </a> <button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="navbar-nav ml-auto"> <li class="dropdown nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false"> <i class="material-icons">apps</i> Components </a> <div class="dropdown-menu dropdown-with-icons"> <a href="../index.html" class="dropdown-item"> <i class="material-icons">layers</i> All Components </a> <a href="http://demos.creative-tim.com/material-kit/docs/2.0/getting-started/introduction.html" class="dropdown-item"> <i class="material-icons">content_paste</i> Documentation </a> </div> </li> <li class="nav-item"> <a class="nav-link" href="javascript:void(0)"> <i class="material-icons">cloud_download</i> Download </a> </li> <li class="nav-item"> <a class="nav-link" href="https://twitter.com/CreativeTim" target="_blank"> <i class="fa fa-twitter"></i> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.facebook.com/CreativeTim" target="_blank"> <i class="fa fa-facebook-square"></i> </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.instagram.com/CreativeTimOfficial" target="_blank"> <i class="fa fa-instagram"></i> </a> </li> </ul> </div> </div> </nav> <div class="page-header header-filter" data-parallax="true" style="background-image:url('http://wallpapere.org/wp-content/uploads/2012/02/black-and-white-city-night.png');"></div> <div class="main main-raised"> <div class="profile-content"> <div class="container"> <div class="row"> <div class="col-md-6 ml-auto mr-auto"> <div class="profile"> <div class="avatar"> <img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTU0NjQzOTk4OTQ4OTkyMzQy/ansel-elgort-poses-for-a-portrait-during-the-baby-driver-premiere-2017-sxsw-conference-and-festivals-on-march-11-2017-in-austin-texas-photo-by-matt-winkelmeyer_getty-imagesfor-sxsw-square.jpg" alt="Circle Image" class="img-raised rounded-circle img-fluid"> </div> <div class="name"> <h3 class="title">Christian Louboutin</h3> <h6>Designer</h6> <a href="#pablo" class="btn btn-just-icon btn-link btn-dribbble"><i class="fa fa-dribbble"></i></a> <a href="#pablo" class="btn btn-just-icon btn-link btn-twitter"><i class="fa fa-twitter"></i></a> <a href="#pablo" class="btn btn-just-icon btn-link btn-pinterest"><i class="fa fa-pinterest"></i></a> </div> </div> </div> </div> <div class="description text-center"> <p>An artist of considerable range, Chet Faker — the name taken by Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs and records all of his own music, giving it a warm, intimate feel with a solid groove structure. </p> </div> <div class="row"> <div class="col-md-6 ml-auto mr-auto"> <div class="profile-tabs"> <ul class="nav nav-pills nav-pills-icons justify-content-center" role="tablist"> <li class="nav-item"> <a class="nav-link active" href="#studio" role="tab" data-toggle="tab"> <i class="material-icons">camera</i> Studio </a> </li> <li class="nav-item"> <a class="nav-link" href="#works" role="tab" data-toggle="tab"> <i class="material-icons">palette</i> Work </a> </li> <li class="nav-item"> <a class="nav-link" href="#favorite" role="tab" data-toggle="tab"> <i class="material-icons">favorite</i> Favorite </a> </li> </ul> </div> </div> </div> <div class="tab-content tab-space"> <div class="tab-pane active text-center gallery" id="studio"> <div class="row"> <div class="col-md-3 ml-auto"> <img src="https://images.unsplash.com/photo-1524498250077-390f9e378fc0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83079913579babb9d2c94a5941b2e69d&auto=format&fit=crop&w=751&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1528249227670-9ba48616014f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=66b8e7db17b83084f16fdeadfc93b95b&auto=format&fit=crop&w=357&q=80" class="rounded"> </div> <div class="col-md-3 mr-auto"> <img src="https://images.unsplash.com/photo-1521341057461-6eb5f40b07ab?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=72da2f550f8cbd0ec252ad6fb89c96b2&auto=format&fit=crop&w=334&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1506667527953-22eca67dd919?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6326214b7ce18d74dde5e88db4a12dd5&auto=format&fit=crop&w=750&q=80" class="rounded"> </div> </div> </div> <div class="tab-pane text-center gallery" id="works"> <div class="row"> <div class="col-md-3 ml-auto"> <img src="https://images.unsplash.com/photo-1524498250077-390f9e378fc0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83079913579babb9d2c94a5941b2e69d&auto=format&fit=crop&w=751&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1506667527953-22eca67dd919?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6326214b7ce18d74dde5e88db4a12dd5&auto=format&fit=crop&w=750&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1505784045224-1247b2b29cf3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ec2bdc92a9687b6af5089b335691830e&auto=format&fit=crop&w=750&q=80" class="rounded"> </div> <div class="col-md-3 mr-auto"> <img src="https://images.unsplash.com/photo-1504346466600-714572c4b726?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6754ded479383b7e3144de310fa88277&auto=format&fit=crop&w=750&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1494028698538-2cd52a400b17?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83bf0e71786922a80c420c17b664a1f5&auto=format&fit=crop&w=334&q=80" class="rounded"> </div> </div> </div> <div class="tab-pane text-center gallery" id="favorite"> <div class="row"> <div class="col-md-3 ml-auto"> <img src="https://images.unsplash.com/photo-1504346466600-714572c4b726?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6754ded479383b7e3144de310fa88277&auto=format&fit=crop&w=750&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1494028698538-2cd52a400b17?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83bf0e71786922a80c420c17b664a1f5&auto=format&fit=crop&w=334&q=80" class="rounded"> </div> <div class="col-md-3 mr-auto"> <img src="https://images.unsplash.com/photo-1505784045224-1247b2b29cf3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ec2bdc92a9687b6af5089b335691830e&auto=format&fit=crop&w=750&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1524498250077-390f9e378fc0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=83079913579babb9d2c94a5941b2e69d&auto=format&fit=crop&w=751&q=80" class="rounded"> <img src="https://images.unsplash.com/photo-1506667527953-22eca67dd919?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6326214b7ce18d74dde5e88db4a12dd5&auto=format&fit=crop&w=750&q=80" class="rounded"> </div> </div> </div> </div> </div> </div> </div> <footer class="footer text-center "> <p>Made with <a href="https://demos.creative-tim.com/material-kit/index.html" target="_blank">Material Kit</a> by Creative Tim</p> </footer> <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script> <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script> </body>
html *{ -webkit-font-smoothing: antialiased; } .h6, h6 { font-size: .75rem !important; font-weight: 500; font-family: Roboto,Helvetica,Arial,sans-serif; line-height: 1.5em; text-transform: uppercase; } .name h6 { margin-top: 10px; margin-bottom: 10px; } .navbar { border: 0; border-radius: 3px; padding: .625rem 0; margin-bottom: 20px; color: #555; background-color: #fff!important; box-shadow: 0 4px 18px 0 rgba(0,0,0,.12), 0 7px 10px -5px rgba(0,0,0,.15) !important; z-index: 1000 !important; transition: all 150ms ease 0s; } .navbar.navbar-transparent { z-index: 1030; background-color: transparent!important; box-shadow: none !important; padding-top: 25px; color: #fff; } .navbar .navbar-brand { position: relative; color: inherit; height: 50px; font-size: 1.125rem; line-height: 30px; padding: .625rem 0; font-weight: 300; -webkit-font-smoothing: antialiased; } .navbar .navbar-nav .nav-item .nav-link:not(.btn) .material-icons { margin-top: -7px; top: 3px; position: relative; margin-right: 3px; } .navbar .navbar-nav .nav-item .nav-link .material-icons { font-size: 1.25rem; max-width: 24px; margin-top: -1.1em; } .navbar .navbar-nav .nav-item .nav-link .fa, .navbar .navbar-nav .nav-item .nav-link .material-icons { font-size: 1.25rem; max-width: 24px; margin-top: -1.1em; } .navbar .navbar-nav .nav-item .nav-link { position: relative; color: inherit; padding: .9375rem; font-weight: 400; font-size: 12px; border-radius: 3px; line-height: 20px; } a .material-icons { vertical-align: middle; } .fixed-top { position: fixed; z-index: 1030; left: 0; right: 0; } .profile-page .page-header { height: 380px; background-position:center; } .page-header { height: 100vh; background-size: cover; margin: 0; padding: 0; border: 0; display: flex; align-items: center; } .header-filter:after, .header-filter:before { position: absolute; z-index: 1; width: 100%; height: 100%; display: block; left: 0; top: 0; content: ""; } .header-filter::before { background: rgba(0,0,0,.5); } .main-raised { margin: -60px 30px 0; border-radius: 6px; box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2); } .main { background: #FFF; position: relative; z-index: 3; } .profile-page .profile { text-align: center; } .profile-page .profile img { max-width: 160px; width: 100%; margin: 0 auto; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -o-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .img-raised { box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2); } .rounded-circle { border-radius: 50%!important; } .img-fluid, .img-thumbnail { max-width: 100%; height: auto; } .title { margin-top: 30px; margin-bottom: 25px; min-height: 32px; color: #3C4858; font-weight: 700; font-family: "Roboto Slab","Times New Roman",serif; } .profile-page .description { margin: 1.071rem auto 0; max-width: 600px; color: #999; font-weight: 300; } p { font-size: 14px; margin: 0 0 10px; } .profile-page .profile-tabs { margin-top: 4.284rem; } .nav-pills, .nav-tabs { border: 0; border-radius: 3px; padding: 0 15px; } .nav .nav-item { position: relative; margin: 0 2px; } .nav-pills.nav-pills-icons .nav-item .nav-link { border-radius: 4px; } .nav-pills .nav-item .nav-link.active { color: #fff; background-color: #9c27b0; box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6); } .nav-pills .nav-item .nav-link { line-height: 24px; font-size: 12px; font-weight: 500; min-width: 100px; color: #555; transition: all .3s; border-radius: 30px; padding: 10px 15px; text-align: center; } .nav-pills .nav-item .nav-link:not(.active):hover { background-color: rgba(200,200,200,.2); } .nav-pills .nav-item i { display: block; font-size: 30px; padding: 15px 0; } .tab-space { padding: 20px 0 50px; } .profile-page .gallery { margin-top: 3.213rem; padding-bottom: 50px; } .profile-page .gallery img { width: 100%; margin-bottom: 2.142rem; } .profile-page .profile .name{ margin-top: -80px; } img.rounded { border-radius: 6px!important; } .tab-content>.active { display: block; } /*buttons*/ .btn { position: relative; padding: 12px 30px; margin: .3125rem 1px; font-size: .75rem; font-weight: 400; line-height: 1.428571; text-decoration: none; text-transform: uppercase; letter-spacing: 0; border: 0; border-radius: .2rem; outline: 0; transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1); will-change: box-shadow,transform; } .btn.btn-just-icon { font-size: 20px; height: 41px; min-width: 41px; width: 41px; padding: 0; overflow: hidden; position: relative; line-height: 41px; } .btn.btn-just-icon fa{ margin-top: 0; position: absolute; width: 100%; transform: none; left: 0; top: 0; height: 100%; line-height: 41px; font-size: 20px; } .btn.btn-link{ background-color: transparent; color: #999; } /* dropdown */ .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; float: left; min-width: 11rem !important; margin: .125rem 0 0; font-size: 1rem; color: #212529; text-align: left; background-color: #fff; background-clip: padding-box; border-radius: .25rem; transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1); } .dropdown-menu.show{ transition: transform .3s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1); } .dropdown-menu .dropdown-item:focus, .dropdown-menu .dropdown-item:hover, .dropdown-menu a:active, .dropdown-menu a:focus, .dropdown-menu a:hover { box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 10px -5px rgba(156,39,176,.4); background-color: #9c27b0; color: #FFF; } .show .dropdown-toggle:after { transform: rotate(180deg); } .dropdown-toggle:after { will-change: transform; transition: transform .15s linear; } .dropdown-menu .dropdown-item, .dropdown-menu li>a { position: relative; width: auto; display: flex; flex-flow: nowrap; align-items: center; color: #333; font-weight: 400; text-decoration: none; font-size: .8125rem; border-radius: .125rem; margin: 0 .3125rem; transition: all .15s linear; min-width: 7rem; padding: 0.625rem 1.25rem; min-height: 1rem !important; overflow: hidden; line-height: 1.428571; text-overflow: ellipsis; word-wrap: break-word; } .dropdown-menu.dropdown-with-icons .dropdown-item { padding: .75rem 1.25rem .75rem .75rem; } .dropdown-menu.dropdown-with-icons .dropdown-item .material-icons { vertical-align: middle; font-size: 24px; position: relative; margin-top: -4px; top: 1px; margin-right: 12px; opacity: .5; } /* footer */ footer{ margin-top: 10px; color: #555; padding: 25px; font-weight: 300; } .footer p{ margin-bottom: 0; font-size: 14px; margin: 0 0 10px; font-weight: 300; } footer p a{ color: #555; font-weight: 400; } footer p a:hover { color: #9f26aa; text-decoration: none; }
var big_image; $(document).ready(function() { BrowserDetect.init(); // Init Material scripts for buttons ripples, inputs animations etc, more info on the next link https://github.com/FezVrasta/bootstrap-material-design#materialjs $('body').bootstrapMaterialDesign(); window_width = $(window).width(); $navbar = $('.navbar[color-on-scroll]'); scroll_distance = $navbar.attr('color-on-scroll') || 500; $navbar_collapse = $('.navbar').find('.navbar-collapse'); // Activate the Tooltips $('[data-toggle="tooltip"], [rel="tooltip"]').tooltip(); // Activate Popovers $('[data-toggle="popover"]').popover(); if ($('.navbar-color-on-scroll').length != 0) { $(window).on('scroll', materialKit.checkScrollForTransparentNavbar); } materialKit.checkScrollForTransparentNavbar(); if (window_width >= 768) { big_image = $('.page-header[data-parallax="true"]'); if (big_image.length != 0) { $(window).on('scroll', materialKit.checkScrollForParallax); } } }); $(document).on('click', '.navbar-toggler', function() { $toggle = $(this); if (materialKit.misc.navbar_menu_visible == 1) { $('html').removeClass('nav-open'); materialKit.misc.navbar_menu_visible = 0; $('#bodyClick').remove(); setTimeout(function() { $toggle.removeClass('toggled'); }, 550); $('html').removeClass('nav-open-absolute'); } else { setTimeout(function() { $toggle.addClass('toggled'); }, 580); div = '<div id="bodyClick"></div>'; $(div).appendTo("body").click(function() { $('html').removeClass('nav-open'); if ($('nav').hasClass('navbar-absolute')) { $('html').removeClass('nav-open-absolute'); } materialKit.misc.navbar_menu_visible = 0; $('#bodyClick').remove(); setTimeout(function() { $toggle.removeClass('toggled'); }, 550); }); if ($('nav').hasClass('navbar-absolute')) { $('html').addClass('nav-open-absolute'); } $('html').addClass('nav-open'); materialKit.misc.navbar_menu_visible = 1; } }); materialKit = { misc: { navbar_menu_visible: 0, window_width: 0, transparent: true, fixedTop: false, navbar_initialized: false, isWindow: document.documentMode || /Edge/.test(navigator.userAgent) }, initFormExtendedDatetimepickers: function() { $('.datetimepicker').datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-chevron-up", down: "fa fa-chevron-down", previous: 'fa fa-chevron-left', next: 'fa fa-chevron-right', today: 'fa fa-screenshot', clear: 'fa fa-trash', close: 'fa fa-remove' } }); }, initSliders: function() { // Sliders for demo purpose var slider = document.getElementById('sliderRegular'); noUiSlider.create(slider, { start: 40, connect: [true, false], range: { min: 0, max: 100 } }); var slider2 = document.getElementById('sliderDouble'); noUiSlider.create(slider2, { start: [20, 60], connect: true, range: { min: 0, max: 100 } }); }, checkScrollForParallax: function() { oVal = ($(window).scrollTop() / 3); big_image.css({ 'transform': 'translate3d(0,' + oVal + 'px,0)', '-webkit-transform': 'translate3d(0,' + oVal + 'px,0)', '-ms-transform': 'translate3d(0,' + oVal + 'px,0)', '-o-transform': 'translate3d(0,' + oVal + 'px,0)' }); }, checkScrollForTransparentNavbar: debounce(function() { if ($(document).scrollTop() > scroll_distance) { if (materialKit.misc.transparent) { materialKit.misc.transparent = false; $('.navbar-color-on-scroll').removeClass('navbar-transparent'); } } else { if (!materialKit.misc.transparent) { materialKit.misc.transparent = true; $('.navbar-color-on-scroll').addClass('navbar-transparent'); } } }, 17) }; // Returns a function, that, as long as it continues to be invoked, will not // be triggered. The function will be called after it stops being called for // N milliseconds. If `immediate` is passed, trigger the function on the // leading edge, instead of the trailing. function debounce(func, wait, immediate) { var timeout; return function() { var context = this, args = arguments; clearTimeout(timeout); timeout = setTimeout(function() { timeout = null; if (!immediate) func.apply(context, args); }, wait); if (immediate && !timeout) func.apply(context, args); }; }; var BrowserDetect = { init: function() { this.browser = this.searchString(this.dataBrowser) || "Other"; this.version = this.searchVersion(navigator.userAgent) || this.searchVersion(navigator.appVersion) || "Unknown"; }, searchString: function(data) { for (var i = 0; i < data.length; i++) { var dataString = data[i].string; this.versionSearchString = data[i].subString; if (dataString.indexOf(data[i].subString) !== -1) { return data[i].identity; } } }, searchVersion: function(dataString) { var index = dataString.indexOf(this.versionSearchString); if (index === -1) { return; } var rv = dataString.indexOf("rv:"); if (this.versionSearchString === "Trident" && rv !== -1) { return parseFloat(dataString.substring(rv + 3)); } else { return parseFloat(dataString.substring(index + this.versionSearchString.length + 1)); } }, dataBrowser: [{ string: navigator.userAgent, subString: "Chrome", identity: "Chrome" }, { string: navigator.userAgent, subString: "MSIE", identity: "Explorer" }, { string: navigator.userAgent, subString: "Trident", identity: "Explorer" }, { string: navigator.userAgent, subString: "Firefox", identity: "Firefox" }, { string: navigator.userAgent, subString: "Safari", identity: "Safari" }, { string: navigator.userAgent, subString: "Opera", identity: "Opera" } ] };

Related: See More


Questions / Comments: