How to Change Breakpoints with Bootstrap

What is Breakpoint?

Though the Bootstrap is a complete framework and packaged with JavaScript components too but achieving effortless responsive behaviour is the major key point we can grant Bootstrap for. Responsive behaviour depends on resolutions (viewport or screen sizes).

By default, Bootstrap supports four resolutions – called Breakpoints in technical term.

< 768px Extra small devices Phones
≥ 768px Small devices Tablets
≥ 992px Medium devices Desktops
≥ 1200px Large devices Desktops

we had integrated Bootstrap Navbar for our primary navigation in a project and as you may be aware that Navbar starts collapsing with < 768px. However, when you have a project with 6 - 7+ navbar items to show, you will notice the navbar drops to a new line and it's not really feasible making the navbar look tidy on one line. So basically we needed to change the breakpoint from 768px to 992px. There are 3 ways you can change media queries breakpoints with Bootstrap:-

  • Customize Bootstrap before downloading
  • Change in CSS
  • Create a new Breakpoint

Customize Bootstrap before downloading

Bootstrap lets us change some of the preferences before downloading a ZIP. If you got the project requirement then you should select this option. Because here, you would have the freedom to change breakpoints before start working on a project. So you can plan well in advance.

Change in CSS

If you need to change the behavior of the specific component (e.g. the navbar), you can overwrite or change the breakpoint with CSS:-


@media (max-width: 992px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Create a new Breakpoint

This option requires a bit of extra work but if the above two are not the solution in your case, you need to create a new breakpoint. Below are some steps:-

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to change the Bootstrap 4 Carousel to a Fade Transition instead of Sliding

Have you ever wanted to change the default slide transition in the Bootstrap 4 Carousel to a fade transition instead of a slide one? Well, you’re in the right place!

To do that, the only change we need to make to the HTML code is adding the class carousel-fade to the main carousel div. In our example it’s the div with the ID element my-carousel. Next, we can just copy and paste the CSS code below and you will be good to go! Simple right?


<div id="my-carousel" class="carousel slide carousel-fade" data-ride="carousel" data-interval="5000">
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="//placehold.it/1200x400/cc09f0" alt="First slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="//placehold.it/1200x400/5609f0" alt="Second slide">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="//placehold.it/1200x400/cc54f0" alt="Third slide">
        </div>
    </div>
    <a class="carousel-control-prev" href="#my-carousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#my-carousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

.carousel-fade .carousel-item {
	opacity: 0;
	transition-duration: .6s;
	transition-property: opacity;
}

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
	opacity: 1;
}

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
	opacity: 0;
}

.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
	transform: translateX(0);
	transform: translate3d(0, 0, 0);
}

We hope this has helped you. Happy coding!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Bootstrap 4 – Mobile Nav Bar Slide from Left / Right

Do you want to change the default behaviour of the Bootstrap 4 navbar? Well, you’re at the right place. The default menu for mobile is a hamburger menu when clicked it will slide to the menu items.

There are various ways to do this using jQuery/JavaScript but the best way, in our opinion, is just using plain old CSS.

So to do this, we can override the transition styles for the navbar-collapse as follows:-

Mobile Nav – Slide from Left


@media (max-width: 768px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        left: 0;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
    }
    .navbar-collapse.collapsing {
        height: auto;
        -webkit-transition: left 0.3s ease;
        -o-transition: left 0.3s ease;
        -moz-transition: left 0.3s ease;
        transition: left 0.3s ease;
        left: -100%;
    }
    .navbar-collapse.show {
        left: 0;
        -webkit-transition: left 0.3s ease-in;
        -o-transition: left 0.3s ease-in;
        -moz-transition: left 0.3s ease-in;
        transition: left 0.3s ease-in;
    }
}

Mobile Nav – Slide from Right


@media (max-width: 992px) {
    .navbar-collapse {
        position: absolute;
        top: 54px;
        right: 100%;
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 15px;
        width: 100%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.collapsing {
        height: auto !important;
        margin-right: 50%;
        transition: all 0.3s ease;
        display: block;
    }
    .navbar-collapse.show {
        right: 0;
    }
}

We hope this quick tutorial has helped you. If you require any further assistance just leave a comment below.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to add touchSwipe to your Bootstrap Carousel

Have you ever wanted to add touch swipe and gestures to your Bootstrap Carousel? It’s quite simple to do really…

So first things first, you will need to add the TouchSwipe jQuery Plugin to your website. This plugin will detect single and multiple finger swipes, pinches and falls back to mouse ‘drags’ on the desktop. It offers a lot more features which you can read about here.

Once you have added this, you can add the Bootstrap Carousel as follows:-


<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">

        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-item active">
            <img class="first-slide" src="https://via.placeholder.com/960x500" alt="First slide">
            <div class="container">
                <div class="carousel-caption text-left">
                    <h1>Example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <img class="second-slide" src="https://via.placeholder.com/960x500" alt="Second slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Another example headline.</h1>
                    <p>Cras justo odio, dapibus ac facilisis in</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
            </div>
        </div>
        <div class="carousel-item">
            <a href="https://codepen.io" target="_blank" rel="noopener noreferrer"><img class="third-slide" src="https://via.placeholder.com/960x500" alt="Third slide"></a>
        </div>
    </div>
</div>

Now to implement the swipe gestures with the Bootstrap Carousel, you will need to add the below code:-


$( document ).ready(function() {

    // Carousel

    $(".carousel").carousel({
        interval: false,
        pause: true
    });

    $( ".carousel .carousel-inner" ).swipe( {
    swipeLeft: function ( event, direction, distance, duration, fingerCount ) {
        this.parent( ).carousel( 'next' );
    },
    swipeRight: function ( ) {
        this.parent( ).carousel( 'prev' );
    },
    threshold: 0,
    tap: function(event, target) {
        window.location = $(this).find('.carousel-item.active a').attr('href');
    },
    excludedElements:"label, button, input, select, textarea, .noSwipe"
    } );

    $('.carousel .carousel-inner').on('dragstart', 'a', function () {
        return false;
    });  

});

And that’s it, pretty simple, right?

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Change Ordering of Bootstrap 4 Columns on Mobile

In this article, we are going to show you how you can change the ordering of columns using Bootstrap 4. By this, we mean we can actually order the alter of the columns in which they are displayed, differently from mobile to desktop, or at a particular breakpoint for that matter.

By using .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g. .order-1.order-md-2). This includes support for 1 through 12 across all five grid tiers.
.
There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively. These classes can also be intermixed with the numbered .order-* classes as needed.

So, how do we do it exactly? Well, let’s start with the HTML markup, this is the part that controls it all actually: (if you prefer going straight to the CodePen, then click here)


<div class="container">

  <h2>Without column ordering</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
  </div>

  <h2>With column ordering</h2>
  <div class="row">
    <div class="col-sm-6 order-sm-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=B" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-sm-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=A" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Descending Order</h2>
  <div class="row">
    <div class="col-sm-6 order-12">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-11">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-10">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-9">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-8">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-7">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-5">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-4">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-3">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-2">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6 order-1">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>

  <h2>12 columns - Ascending Order</h2>
  <div class="row">
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=1" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=2" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=3" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=4" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=5" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=6" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=7" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=8" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=9" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=10" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=11" alt="" class="w-100" />
    </div>
    <div class="col-sm-6">
      <img src="https://dummyimage.com/400x400/000/fff&text=12" alt="" class="w-100" />
    </div>
  </div>
</div>

Alongside this, we added the following CSS, although this isn’t particularly required for our example:


* {
  font-family: 'Roboto', sans-serif;
}

h2 {margin-top:2em;}
.container {
  padding: 2rem;
}

.order-sm-12 img {
  border: 5px solid orange;
}

.order-sm-1 img {
  border: 5px solid blue;
}

In this example, we have demonstrated how you would display a grid ‘without column ordering’, ‘with column ordering’, ’12 columns – Descending Order’, and ’12 columns – Ascending Order’.

Okay, if you didn’t understand how the above works, it’s not a problem. The thing to remember here is that when we are using order-sm-x and order-x we are doing this using mobile-first methods. So, let’s say we wanted the first column which appears on desktop first, but then last on mobile; in our HTML markup, we would add the column that we want to display on mobile (first) above the column that we want to display on the desktop. Once you have done this, order-sm-x determines the breakpoint in which we want to change the ordering on desktop, so once -sm is triggered, the order will change based on the order-x value.

We hope we have explained this well enough to get how this works if in doubt, check out the CodePen Example, or drop us a comment below, we’ll assist if you’re in doubt, that’s just what we do 😉

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Make the Bootstrap 4 Navbar Dropdown Work on Hover Instead of Click

If you have ever created your own Bootstrap Navbar with a dropdown menu, the first thing you may notice is that you have to click the parent link to reveal the sub-menu. This is an intentional design decision according to Mark Otto:

“The purpose of a hover state is to indicate something is clickable (underlined text) or to provide some quick information (full URL in a tooltip). The purpose of a click is to actually do something, to take explicit action.” – Mark Otto

It’s a valid point but there are always situations where people prefer the hover method. To be honest, not a lot of menus even feature the down chevron, so the hover element makes it clearer that there are sub-menu items to be clicked.

In this tutorial, we are going to be using Bootstrap 4 with the Jumbotron template as an example to show you how simple it is to achieve.

Prefer to dive straight into the CodePen, then click here.

Let’s Begin

Okay, let’s say we have the following HTML markup:


   <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

<main role="main">

  <!-- Main jumbotron for a primary marketing message or call to action -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Menu Dropdown on Hover</h1>
      <p>Hey ho, so let's make your dropdown menu work on hover instead of click.</p>
      <p><a href="https://silvawebdesigns.com/" target="_blank" class="btn btn-primary btn-lg" role="button" rel="noopener noreferrer">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4">
        <h2>Learn</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Code</h2>
        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
      <div class="col-md-4">
        <h2>Repeat</h2>
        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>

  </div> <!-- /container -->

</main>

<footer class="container">
  <p>&copy; Silva Web Designs 2020</p>
</footer>

Now, the important part, to get the CSS to work on hover instead of click, we will be adding the following CSS:


body {
    padding-top: 60px;
    padding-bottom: 40px;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}
.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

The key feature of the CSS is simply adding display: block; to the following class element; .dropdown:hover .dropdown-menu

And it’s really as simple as that.

We will need to include the Bootstrap Assets which as of the time of writing, the latest are:

With the CSS code, simply add the stylesheet <link> into your <head> before all other stylesheets to load your CSS.


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

The with the JS, they require jQuery, and their own JavaScript plugins. Place the following scripts near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then the Bootstrap JavaScript plugins.

Bootstrap uses the jQuery’s slim build, but the full version is also supported:


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

And there we have it, it’s as simple as that really! Some common problems can be due to the order/positioning of the CSS/JS files, but other than that, it’s a simple feature to implement. You can also make it a bit fancier as well and add some animations into the mix to make the dropdown menu slide down/up. If you would like any help with this, don’t hesitate to get back to us in the comments and we’ll show you how it’s done.

We hope you’ve enjoyed this article and happy coding devs!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add A Toggle For Password Visibility

In today’s tutorial, we’re going to show you how to add a toggle icon next to your password to show/hide the value.

The way in which we will be adding this is using jQuery, Bootstrap 4 with Font Awesome. This can be done without Bootstrap and Font Awesome, but these days, these are often used for a lot of websites.

If you prefer, you can check this out on CodePen.

Let’s dive right into it and start with your HTML markup:


<div class="container">
  <div class="row justify-content-center">
    <div class="col-6">
      <form>
        <div class="form-group">
          <label>Password</label>
          <div class="input-group" id="show_hide_password">
            <input class="form-control" type="password" value="mypassword">
            <div class="input-group-addon">
              <a href=""><i class="fa fa-eye-slash" aria-hidden="true"></i></a>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

And here’s the jQuery code to go along with it:


$(document).ready(function () {
  $("#show_hide_password a").on("click", function (event) {
    event.preventDefault();
    $("#show_hide_password i").toggleClass('fa-eye fa-eye-slash');
    if ($("#show_hide_password input").attr("type") == "text") {
      $("#show_hide_password input").attr("type", "password");
    } else if ($("#show_hide_password input").attr("type") == "password") {
      $("#show_hide_password input").attr("type", "text");
    }
  });
});

And there you have it. There are other ways to do this, we can use an icon instead of integrating Font Awesome, we could even add a checkbox to reveal the password but I think it’s quite commonly used to have the eye icon with password reveals these days. Do you have another way you like to add this? Let us know in the comments below.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Upload a CSV file into a MySQL Database Using PHP

Are you wondering how you can upload a CSV file into a MySQL database using PHP? Well if you are, you are in the right place!

In our example, we are going to be using Bootstrap and mysqli for the database connection. See below the full script needed in order to complete this action:


<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">

    <div class="container">

      <div class="section">

        <?php

        $db = new mysqli('localhost', 'username', 'password', 'databasename');

        if($db->connect_errno > 0){
            die('Unable to connect to database [' . $db->connect_error . ']');
        } 


          // File Upload

          if (isset($_POST['submit'])) {
             
                   
              // Import the uploaded file to the database

              $handle = fopen($_FILES['filename']['tmp_name'], "r");

               while (($data = fgetcsv($handle, 1000, ",")) !== FALSE) {

                  $sql = "INSERT INTO `tablename` (`field1`, `field2`, `field3`, `field4`, `field5`, `field6`, `field7`) VALUES ($data[0], '$data[1]', '$data[2]', '$data[3]', '$data[4]', '$data[5]', $data[6]);";

                  if(!$result = $db->query($sql)){
                      die('There was an error running the query [' . $db->error . ']');
                  }
              }

              fclose($handle);

              echo "Import Completed Successfully"; 
              mysqli_close($db);
          }

          else {
                
             echo "<center>";
              echo "<div class='col-md-12'>";

              echo "<h1>Upload Vouchers CSV File. </h1><br />\n"; 
              echo "<form enctype='multipart/form-data' action='/voucher-import/' method='post'>"; 
              echo "File name to import:<br /><br />\n";
              echo '<input type="file" class="filestyle" name="filename" data-iconName="glyphicon-inbox" required><p>&nbsp;&nbsp;</p><p></p>';
              echo "<input class='btn'  type='submit' name='submit' value='Import'><p></p></form>";
          }
             echo "</div>";
             echo "</center>";
          ?>
          </div>

      </div>


	</main><!-- #main -->
</div><!-- #primary -->

In the example provided above, we are inserting a CSV file with 7 columns where all rows within the CSV are looped and inserted into the database.

The main things that will need editing are first the database connection, so you will need to replace the following line:


$db = new mysqli('localhost', 'username', 'password', 'databasename');

The other part that will need changing is INSERT statement shown below:


$sql = "INSERT INTO `tablename` (`field1`, `field2`, `field3`, `field4`, `field5`, `field6`, `field7`) VALUES ($data[0], '$data[1]', '$data[2]', '$data[3]', '$data[4]', '$data[5]', $data[6]);";

So firstly, you would change the tablename to match the table you would like to insert the data to. If you have less/more columns, you will have to remove/add fields and values to match how many columns you have in your database.

If you are inserting NULL values, you can replace the $data[x] value with NULL. Let’s say your first column is an ID (auto-increment), you can simply replace $data[0] with NULL.

Do remember, for this to work, you will need to upload CSV files that are comma-separated.

And just like that, you now have an awesome CSV upload script!

If this has helped you out, leave a comment below. If for some reason you cannot get this to work, get in touch, we always love helping people!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Add a Single Bootstrap Carousel to a Single Product Gallery using WooCommerce

Today we are going to show you how to replace the WooCommerce Gallery and Thumbnails to a single Bootstrap 4 Carousel.

We’re going to assume that you have already added WooCommerce Support and WooCommerce Product Gallery Slider, if not, you can add these by adding the following code to your functions.php file:


add_theme_support('woocommerce');
add_theme_support( 'wc-product-gallery-slider' );

# You can also add Lightbox Gallery as follows:
add_theme_support( 'wc-product-gallery-lightbox' );

So if you have added a featured image and a gallery to your single product, once styled you will end up something that looks like this:

This already works as a slider, but you have to use the thumbnails to navigate between the different images.

The way that we added a Bootstrap 4 carousel to this in place of the thumbnails was as follows:

Step 1

Navigate to the following directory; /wp-content/plugins/woocommerce/templates/single-product

Copy the product-image.php to your child theme folder, for this; this will be placed in /your-theme/woocommerce/single-product directory.

It’s always best-practise to copy any WooCommerce templates to your theme or child folder, the reason for this is that these files wouldn’t end up being replaced if you update the file in the /plugins/ directory.

Step 2

We are now going to remove the following section from the product-image.php file:


<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<figure class="woocommerce-product-gallery__wrapper">
		<?php
		if ( $product->get_image_id() ) {
			$html = wc_get_gallery_image_html( $post_thumbnail_id, true );
		} else {
			$html  = '<div class="woocommerce-product-gallery__image--placeholder">';
			$html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image" />', esc_url( wc_placeholder_img_src( 'woocommerce_single' ) ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
			$html .= '</div>';
		}

		echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id ); // phpcs:disable WordPress.XSS.EscapeOutput.OutputNotEscaped

		do_action( 'woocommerce_product_thumbnails' );
		?>
	</figure>
</div>

And we are going to replace this with the following:


<?php
    global $product;

    $attachment_ids = $product->get_gallery_image_ids();
    $image_links[] = get_the_post_thumbnail_url();
    $product_inc = 1;

    foreach( $attachment_ids as $attachment_id ) {
        $image_links[] = wp_get_attachment_url( $attachment_id );
    }
?>

<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
	<!-- Product Carousel -->
	<div id="product-carousel" class="carousel slide carousel-fade" data-ride="carousel">
		<div class="carousel-inner" role="listbox">
			<?php
			    foreach( $image_links as $image_link_url ) { ?>
			    	<div class="carousel-item <?php echo ($product_inc==1)?'active':''; ?>">
			        	<?php echo '<img class="prod-car-img" src="'.$image_link_url.'" />'; ?>
			        </div>
			        <?php $product_inc++;
			    }
			?>
		</div>	
		<a class="carousel-control-prev" href="#product-carousel" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#product-carousel" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>						
	</div><!-- #Product Carousel -->
</div>

Result

To summarise what we have done here, we have basically added the ‘featured-image’ to an array (image_links[]). We then looped through the thumbnails to get the image URL’s of the product gallery and then looped the array containing all images together in the Bootstrap 4 Carousel.

What do you end up with?

We now have a Bootstrap 4 Carousel which combines the featured image with the product gallery, we have removed the thumbnails and instead added a Bootstrap 4 carousel in its place.

Awesome huh?

If you need any help, or if this has helped you; please leave a comment below!

Happy coding folks!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Bootstrap – Responsive Carousel – Changing the number of visible slides

In this example, we are going to show how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time.

See the JSFIDDLE to see how this works. On a desktop, it rotates one item at a time and has 3 elements in view. If you shrink the browser to mobile you will not see it rotates one item at a time but only has one element in view (as opposed to it usually stacking 3 elements).

Here is the code you need from the example:-

HTML


<div class="row">
  <div class="col-md-12">
    <div class="carousel carousel-blog slide" id="carousel123">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

CSS


.carousel-blog .carousel-control {
  width: 4%;
  background-image: none;
}

.carousel-blog .carousel-control.left {
  margin-left: 15px;
}

.carousel-blog .carousel-control.right {
  margin-right: 15px;
}

.carousel-blog .cloneditem-1,
.carousel-blog .cloneditem-2,
.carousel-blog .cloneditem-3,
.carousel-blog .cloneditem-4,
.carousel-blog .cloneditem-5 {
  display: none;
}

@media all and (min-width: 768px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -33.333%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 33.333%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-1,
  .carousel-blog .carousel-inner .cloneditem-2 {
    display: block;
  }
}

@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

@media all and (min-width: 992px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -16.666%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 16.666%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-3,
  .carousel-blog .carousel-inner .cloneditem-4,
  .carousel-blog .carousel-inner .cloneditem-5 {
    display: block;
  }
}

@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

.container {
  margin-bottom: 50px;
}

body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

h2 {
  margin: 2em 0 1em;
}

.logo {
  margin: 20px auto;
  height: 100px;
}

@media only screen and (min-width: 768px) {
  .logo {
    margin: 28px;
    float: left;
  }
}

.title {
  padding: 28px;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

jQuery


(function() {
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://getbootstrap.com/javascript/#carousel
  $('#carousel123').carousel({
    interval: 2000
  });
}());

(function() {
  $('.carousel-blog .item').each(function() {
    var itemToClone = $(this);

    for (var i = 1; i < 3; i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-" + (i))
        .appendTo($(this));
    }
  });
}());

If you need to modify the code to show more slides or change the breakpoints, just remember to update these four key elements:

  • Update the html classes for responsive rules
  • Update the css item widths
  • Add in the required .cloneditem-n management
  • Tweak the js loop to control the number of cloned items
Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share