wordpress related posts

Bootstrap 3 Tutorial 4 – Using Bootsnipp to Copy & Paste HTML5 Web Elements

Posted On February 6, 2019 at 2:29 am by / No Comments

To view a working version of the page made in this tutorial, visit

In this video, I’ll show you how to easily copy and paste snippets of code to make forms, image hover effects, buttons and many other web elements for your Bootstrap website.

Hello. I just wanted to talk for a small bit about Bootsnipp.com.

This site basically is super helpful to grab snippets of code for your Bootstrap 3 project. They give you samples of types of snippets you can copy and paste like social buttons and the list really just goes on and on…frequently questioned questions, social dashboard, ratings, so these are things – elements of code – that would take a bit of time to really enter yourself. So, it’s a lot simpler to grab the snippets that have been made by the folks at Bootsnipp, so thanks to Max Surguy and anyone else who has made these snippets for everyone to use – that is wonderful.

Just as an example, I’m gonna go to one snippet of code that I reckon a lot of people might find somewhat useful is this thumbnail caption hover effect.

It starts with a preview – all of their snippets do, so you can see how this would function on your web page. Looks fantastic. And they provide literally, the HTML, the CSS and the JavaScript you would need to make this on your own site.

So, I’ve gone ahead and added this already to my website. Commented out Bootsnipp thumbnail caption hover effect
and I have literally copied the HTML onto my page and that’s what you basically see from here to here.

I did the same with the CSS. I made bootsnipp.css. First of all, I referenced it by linking to it up here css/bootnsipp.css, which is this file that I made because I don’t want to touch the Bootstrap CSS file – I always just leave that alone – I just add to it , so I’ve linked to that.

And, last but not least, back to the Bootsnipp site. The JavaScript I just copied and pasted into this file – bootsnipp.js.

I made this as a separate file and, again, at the bottom of the page, I’ve gone ahead and linked to my bootsnipp.js file that I’ve saved in the JavaScript folder.

So, when I run this page, which I’ll show for you here. This is what made within 30 seconds again, thanks to Bootsnipp. It’s a fully functional thumbnail hover effect with captions and it would just be a matter of going back to the HTML and changing the text and the images with my own.

That’s that, so I recommend that you check out bootsnipp.com when you can for yourself.

Another clean feature they have on the site is this form builder, where you can literally drag and drop components and make your form really quickly.

They have inputs, they have radio check boxes, buttons and when you’re all done making your choices, you can simply go and copy and paste your form as well.

Ok, thanks very much for watching and please be sure to comment, rate and subscribe.


Leave a Reply

Your email address will not be published. Required fields are marked *

Translate ยป