Get access to an awe-inspiring collection Of 87 Beautiful Wordpress themes for the price of one Get it now Ad

Blog

Bootstrap Navbar

By Ondrej

2.6.2017

Today I'd like to show you how to create a bootstrap navbar, adjust it to your needs and tweak its behaviour. In this tutorial and guide, we will explore in detail all the navbar components and how to properly use every of them. We'll also discuss common problems that coders face while implementing Bootstrap's navbars. At the end of the article, we will also use some CSS and jQuery tricks to enhance the basic navbar structure and apply some advanced tweaks to…

Continue reading

Bootstrap Sidebar

By Ondrej

25.4.2017

Today I’d like to show you how to create a collapsible HTML sidebar navigation using Bootstrap 3 with some CSS and jQuery. Since Bootstrap 3 or even their latest Alpha version 4.0.0 doesn't provide one, we will build four separate solutions, each of them with slightly different features. In each part of the tutorial, I will guide you step by step through all the necessary steps in HTML, CSS and JavaScript. We're going to build 5 sidebars like this one. Here is…

Continue reading

Bootstrap tips and tricks

By Ondrej

10.4.2017

Bootstrap is full of incredible features but can seem too complex for many of us. You simply cannot remember all the functions or cannot take one week off to study its documentation. Many times even experienced users get surprised when they discover some of its hidden gems. I have carefully chosen some of the best tips and tricks that I have used in my Bootstrap coding career so far and I would like to share them with you. For a better reading experience, I divided them into 4 groups. …

Continue reading

Free PSD Poster Mockups

By Ondrej

20.2.2017

When creating your portfolio website, you can use photographs or print screens of your designs or artwork to present your skills to your prospective client. Almost everybody does that. But there is a much better way to showcase your work. Mockups. It won't consume a lot more of your time than taking the screenshots but the results will look a way better than screenshots do.  To help you with your portfolio presentation, I've compiled 40 of my favourite free PSD poster mockups.…

Continue reading

Bootstrap ReCaptcha Form Tutorial

By Ondrej

18.1.2017

Many of you asked for a tutorial on implementing a Captcha to the Bootstrap forms, here it is. I chose a popular Captcha solution, Google's ReCaptcha, for the verification. In the tutorial, I will be using a working HTML contact form from my previous tutorial. Our form will be using HTML5 sprinkled with some Bootstrap scaffolding and a JavaScript validator. We will submit it via AJAX (the page will not reload) and process the form values with PHP. At last, we will send an email with…

Continue reading

Black Friday 2016 in the web design world

By Ondrej

25.11.2016

Hey, Black Friday is here.  If you were waiting for the best time to get your web hosting, a new WordPress theme or a domain, wait no longer. Sellers won’t offer a discount like this again anytime soon.  Instead of buying some blender thing on sale, invest in your internet business now and make enough to buy 20 better blenders in the future :) I have compiled a short list of the most special deals in the web development industry and I would like to…

Continue reading

Mailchimp signup form tutorial

By Ondrej

2.11.2016

MailChimp is a great tool for email marketing and supports, amongst many other features, also embedded signup forms for your website. MailChimp will provide a basic HTML code but unfortunately, it does not support Bootstrap framework. In this article, you'll learn how to embed a Mailchimp signup form on your website and then convert and integrate it to a Bootstrap markup easily. As always, practical examples are included. Let's get started. 1. Create a MailChimp list If…

Continue reading

Bootstrap carousel tutorial

By Ondrej

18.10.2016

Bootstrap Carousel is a simple JavaScript component included right in the Bootstrap. It can be handy in many situations, mostly presenting the visual elements on your web page. In this guide, I will walk you through the basics to allow you using it on your page, describe its possible configuration options and I will show you how to easily modify its behaviour and make it full-screen or how to change the animation effect from slide to fade animation. Demo 1 Demo 2 Download sources 1. Basic…

Continue reading

Lightweight social share icons

By Ondrej

11.10.2016

The problem with Facebook's and similar JavaScript share buttons or with services like SumoMe is that they add many additional HTTP requests and can slow down your site quite significantly. In today's tutorial, I would like to show you how to create a set of working and lightweight social share icons for your website. I will teach you how to create nicely looking modern icons and how to add the necessary functionality to make them work without decreasing your site's…

Continue reading

3 Simple Steps to Grow your Website audience

By Ondrej

13.6.2016

When you have a blog or a website and you want to grow its audience, there are many ways to do it. But if you would like to see quick results, I would like to recommend you three easy and actionable steps you can do right now to start building and growing a community around your website today. The best part of it: Zero budget is needed! Let’s dive into it. Step #1: Install SumoMe SumoMe is a free toolset for your website that will enhance the user experience on your…

Continue reading

List of 41 Beautiful & Free Icon Fonts

By Ondrej

23.5.2016

You have probably already used some icon fonts on one of your websites. But did you know there are so many beautiful free icon fonts that you could use? This is probably the most comprehensive list of icon fonts on the planet.  And whether you are a developer, designer or web enthusiast, you’ll surely love it. Why icon fonts? Icons are pictograms that help our websites' readers easily navigate through the blocks of the text and different elements on the…

Continue reading

How to build a working Bootstrap contact form

By Ondrej

16.5.2016

Today I would like to show you how to easily build a working HTML contact form using a Bootstrap framework and AJAX with PHP. You will need some basic knowledge of HTML, CSS and Bootstrap CSS framework.  In the tutorial, I will walk you through the parts that will show you how to code the contact form in HTML, style it a bit and add real-time validation to the required fields.  Then I will show you how the data is handled and email sent in the PHP script. As…

Continue reading

Best Bootstrap Plugins in 2017

By Ondrej

18.3.2016

Bootstrap itself is full of useful Javascript components that cover many use cases - be it modal window e.g. for user login, carousel for your homepage, alert messages to show an important message to the visitor. But sometimes you need more than that, lightbox for your photos, markdown text editor, megamenu for your Bootstrap navbar. This is the time when to look for some of the Bootstrap 3rd party plugins - they are usually built on top of the existing Bootstrap components and extend them…

Continue reading

Bootstrapious just turned 1!

By Ondrej

5.3.2016

Last year, on February 28th, I started this website with a simple aim: to release online the Bootstrap themes I had in my drawer, for free. It seems incredible to me, but Bootstrapious just turned one, few days ago. I told myself: wow. It really surprised me a lot that it has been whole year already. How was the first year? So, how was your first year, Bootstrapious? It was great! And this is mostly because of you, Bootstrapious users! I got really many "…

Continue reading

Google maps and Bootstrap Tutorial

By Ondrej

18.1.2016

Do you have a contact page or contact section on your single-page website? If you publish your address, it is always a good idea to add also a map to enhance user experience and to increase awareness of your location or company address. Today, I would like to show you how to easily add a custom-styled Google map to your website with a custom marker and info window that opens when the user clicks on the marker indicating your address. All you need is a little bit of time and basic HTML,…

Continue reading

How to change Bootstrap navbar height

By Ondrej

7.1.2016

Today I would like to share a quick tip with you that you will find handy in case you need to change Bootstrap navbar height. There are more methods but I would like to tell you about these two: 1. Change navbar height by overriding Bootstrap CSS definitions If you are working with CSS files then this is my preferred method. You won't be editing Bootstrap CSS files, neither the Bootstrap theme's CSS, but override the setting in your own file. In my themes, I provide a …

Continue reading

Bootstrap vs. Foundation

By Ondrej

23.6.2015

If you have recently decided to start with one of the CSS frameworks you are probably choosing between the of the main players in this area - Bootstrap and Foundation. I am a big fan of the Bootstrap environment but Foundation has its advantages, that is for sure. To help you at least a bit with your decision today, have a look at the infographics below from Designmodo.    

Continue reading

Share on Facebook Share on G+ Share on Twitter Share on LinkedIn