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…
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…
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. …
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 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 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.…
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…
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…
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,…
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 …
© 2015 - 2017. Bootstrapious is a project by Ondrej Svestka and Kakusei.cz.
