Bootstrap tutorials | Step-by-step tutorials by Bootstrapious

How to build a working Bootstrap contact form

By Ondrej

16.5.2018

Today I would like to show you how to easily build a working HTML contact form using a Bootstrap 4 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…

Bootstrap Sidebar

By Ondrej

25.4.2018

Today I’d like to show you how to create a collapsible HTML sidebar navigation using Bootstrap 4 with some CSS and jQuery. Since Bootstrap 4 nor Bootstrap 3 don't provide one, we will build 5 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 what we&…

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…

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

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…

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…

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…

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…

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,…

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 …