As my Bootstrap 3 and Bootstrap 4 panels/cards got some heat on Google, I created 6 more panels in Bootstrap 3.
Take a look at the restults: https://simplecodetips.com/demo/Responsive-Bootstrap-Panels/
As my Bootstrap 3 and Bootstrap 4 panels/cards got some heat on Google, I created 6 more panels in Bootstrap 3.
Take a look at the restults: https://simplecodetips.com/demo/Responsive-Bootstrap-Panels/
UPDATE – since this post got so much heat, I made a simple CSS & HTML only panel with responsive image and card-header, see here.
This is a Bootstrap 4 version of the Responsive Background Image in Panel Heading (Bootstrap). Since they changed the panel
class with the card
class in Bootstrap 4, you just need to change the old Bootstrap 3 class names… here is my code and demo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.heading-footer { background-image: url(bg.jpg); background-size: cover; height: 175px; -webkit-box-shadow: none; box-shadow: none; border: 0px; border-radius: 0px; } .panel-profile-img { max-width: 250px; margin-top: -160px; margin-bottom: 5px; border: 3px solid #fff; border-radius: 0%; } |
1 2 3 4 5 6 7 8 9 |
<div class="card"> <div class="card-header heading-footer"></div> <div class="card-block text-center"> <img class="panel-profile-img rounded-circle" src="portrait.jpg"> <p class="author-title"><strong>Lorem Ipsum</strong></p> <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> <p>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</p> </div> </div> |
Here is the live demo.
Usually, on my freelance projects I use a beautiful responsive Bootstrap panel to display certain information like photos, offers, contact info, profile info and so on. I find very useful to play with the variables and see particular results depending on your cover image size and text that you need to display in the panel.
The structure is pretty simple, we have a simple Bootstrap style class logic that displays our panel and some custom css that we need to add to modify some settings like removing the standard Bootstrap border and rounded corners.
Here is the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.heading-2 { background-image: url(bg.jpg); background-size: cover; height: 225px; -webkit-box-shadow: none; box-shadow: none; border: 0px; border-radius: 0; } .panel { -webkit-box-shadow: none; box-shadow: none; border: 0px; } .panel-profile-img { max-width: 250px; margin-top: -160px; margin-bottom: 5px; border: 3px solid #fff; border-radius: 0%; } .panel > .panel-body > .author-text { font-size: 12px; color: #333; font-weight: 300; font-family: 'Open Sans', sans-serif; } .panel > .panel-body > .author-title { font-size: 16px; color: #000; font-weight: 400; font-family: 'Open Sans', sans-serif; padding-top: 12px; } |
HTML code:
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="container"> <div class="row" style="max-width: 640px;"> <div class="panel panel-default"> <div class="panel-heading heading-2"></div> <div class="panel-body text-center"> <img class="panel-profile-img" src="portrait.jpg"> <p class="author-title"><strong>Panel Head Text</strong></p> <p class="author-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis tincidunt rutrum. Donec porttitor erat eu justo fermentum, a scelerisque dolor molestie.</p> </div> </div> </div> </div> |
I limited the width of the panel to see how it looks, usually, I use 2-3 panels in a row to display certain informations but, in my opinion, this type of panel looks better when is not displayed on a full width style.
In this post we will create a fixed navbar that disappears when the user scrolls down and reappears upon scrolling up using Bootstrap and jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* simplecodetips.com - Static Navbar */ .navbar-brand { font-size: 21px; font-weight: bolder; } .slidd { position: fixed; width: 100%; padding: 0px; margin: 0px; border: 0px; } .navbar-custom { background-color: #0c4d8a !important; color: #ffffff; border-radius: 0; } .navbar-custom .navbar-nav > li > a { color:#fff; background-color: #0c4d8a; } .navbar-nav { background-color: #0c4d8a; font-size: 12.6px; margin-left: 21px; } .navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus { color: #ffffff; } .navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #1c5c99; } .navbar-custom .navbar-brand { color:#fff; } .navbar-brand a { color: #fff; } .navbar-custom .navbar-toggle { background-color:#eeeeee; } .navbar-custom .icon-bar { background-color:#0c4d8a; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<header> <nav class="navbar navbar-custom navbar-fixed-top slidd"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button><a class="navbar-brand" href="https://simplecodetips.com/" rel="home">Logo</a> </div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li><a href="#">About Us</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Services</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Forum</a></li> </ul> </div> </div> </nav> </header> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
if ( $(window).width() > 769) { var mywindow = $(window); var mypos = mywindow.scrollTop(); var up = false; var newscroll; mywindow.scroll(function () { newscroll = mywindow.scrollTop(); if (newscroll > mypos && !up) { $('.slidd').stop().fadeOut(730); up = !up; console.log(up); } else if(newscroll < mypos && up) { $('.slidd').stop().fadeIn(300); up = !up; } mypos = newscroll; }); } |
You can alter the fadeIn()
and fadeOut()
or change them to other jQuery effect.
Change the background-color and the hover color and so on from the CSS file to fit your project needs and aesthetics.
> is the child combinator in CSS. That means the selector div, span, p, h1 etc. > .my-class only selects the requested .my-class objects that are nested directly inside a div, span, p, etc. and not any objects that are nested further within.
Here is an illustration:
1 2 3 4 5 6 |
<div class="my-div"> <span class="my-class">Some text here</span> <!-- selected class --> <div class="my-div2"> <span class="my-class">More text here</span> <!-- not selected --> </div> </div> |
Here is the CSS that modifies the background-color of .my-class(parent-child) to red and leaves the same class unchanged even if they have the same class name (.my-class).
1 |
.my-div > .my-class { background-color: red; } |
Let’s take a look at a more complex example to see how it works:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="my-div"> <span class="my-class">Some text here</span> <div class="my-div2"> <span class="my-class">More text here</span> <div class="my-div3"> <p> Sample paragraph </p> <div class="my-div4"> My fourth div <div id="my-id1"> My id goes here... </div> </div> </div> </div> </div> |
1 |
.my-div > .my-div2 > .my-div3 > .my-div4 > #my-id1 { background-color: yellow; } |
S1ngletone is a responsive, one page theme created with the popular Bootstrap Framework by CosminR. The theme features multiple content sections with an off canvas navigation menu and a responsive Google Maps section.
Main features include:
S1ngletone was built with:
S1ngletone uses plain html, css and JavaScript, there is no need for a server or compiler to use the template. Just open the index.html file in a browser and you can see the template working. Edit index.html, css or JS files to personalise the template.