Category: Bootstrap

Responsive background image in card-header (Bootstrap 4)

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.

CSS - card-header Bootstrap 4
CSS
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%;
}
HTML card-header Bootstrap 4
XHTML
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.

Responsive background image in panel heading (Bootstrap)

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:

Responsive Background Image in Panel Heading (Bootstrap) CSS
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:

Responsive Background Image in Panel Heading (Bootstrap) HTML
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.

Take a look at the results here.

Fixed Navbar that Disappears on Scroll Down (jQuery + Bootstrap)

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.

Try it Yourself / Demo

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

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

JavaScript / jQuery
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.

How to Properly Use the “>” (greater-than sign) CSS selector

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

How to Properly Use the “>” (greater-than sign) CSS selector
XHTML
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>

What’s selected and what’s not:

  1.  Selected  –  .my-class   is located directly inside .my-div   – a parent-child relationship is established between both elements.
  2.   Not selected  –  .my-class (2) is contained by a second div with another class (.my-div2) within the div, rather than the div itself. Although this  is a descendant of the div, it’s not a child; it’s a grandchild.

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

CSS
1
.my-div > .my-class { background-color: red; }

Try it Yourself

Let’s take a look at a more complex example to see how it works:

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

CSS
1
.my-div > .my-div2 > .my-div3 > .my-div4 > #my-id1 { background-color: yellow; }

Try it Yourself

Bootstrap – One Page Website Template

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:

  • Meta tags for SEO and content (twitter cards, open graph tags)
  • Responsive Google Map (the pointer remains on the center of the page as you scale the window)
  • Font Awesome and Glyphicons

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.

See a live DEMO or Download the files.