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

YouTube Excerpt: To view a working version of the page created in this tutorial, visit http://hidefcreative.com/youtube In this video, I'll show you how to easily copy and paste snippets of code to create forms, image hover effects, buttons and many other web elements for your Bootstrap website. Hello. I just wanted to talk for a little 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 asked questions, social dashboard, ratings, so these are things - elements of code - that would take a bit of time to actually enter yourself. So, it's a lot easier to grab the snippets that have been created by the folks at Bootsnipp, so thanks to Max Surguy and anyone else who has created these snippets for everyone to use - that is wonderful. Just as an example, I'm gonna go to one snippet of code that I think 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 great. And they provide literally, the HTML, the CSS and the JavaScript you would need to create 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 created bootsnipp.css. First of all, I referenced it by linking to it up here css/bootnsipp.css, which is this file that I created 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 created 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 created 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 neat feature they have on the site is this form builder, where you can literally drag and drop components and create 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.

To view a working version of the page created in this tutorial, visit http://hidefcreative.com/youtube In this video, I'll show you how to easily...

Read Full Article 🔍

Curious about Bootstrap 3 Tutorial 4 - Using Bootsnipp To Copy & Paste HTML5 Web Elements's Color? Explore detailed estimates, income sources, and financial insights that reveal the true scope of their profile.

Source ID: u9CsdaFBw6o

Category: color style guide