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.

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:

HTML code:

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.

jQuery .on() method with multiple event handlers

If you need multiple event handlers attached to the same selector executing the same function, you could use:

Learn more about jQuery events here.

What does this function really do? We have two div elements on our page and two different classes .field and .spn. When we click or mouseover over the .field class, the .spn div is showing the “Hello world!” text added via jQuery .text() method.

Try it Yourself / Demo

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

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:

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

Try it Yourself

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

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.

jQuery sidebar menu with show/hide link

This tutorial shows how to implement a jQuery sidebar menu with a show/hide link. The menu is using jQuery and css to handle the functionality.

See a live DEMO.

To make it work, all you need to do is edit the links showed in the menu/demo version and include all the files needed: jQuery, font-awesome(optional).

See a live DEMO.