Programmers Guide

The Noob Programmer’s Guide: Job hacking and learning programming in 3 months


I’ve created this programmer’s guide for practical reasons. The first is trying to help people who are willing to learn to code by guiding them step-by-step.

In this sense, I’ve been talking with people who got into programming without having any sort of technical background and then started working in the field after only 3 months.


Read More

Bootstrap Table. Thinking at what type of code should I use

Bootstrap Table Made Easy

If you want to see more examples and a complete tutorial, you can check out our new article about Bootstrap 4 Tables.


Using the Bootstrap Table is a simple way to design an elegant table. It is easy to make, it has style, it is mobile responsive and it is used for a wide palette of practical applications.

Bootstrap Table. What is good for?

Bootstrap Tables are a beautiful way to create calendars, date pickers, shopping carts, billing reports, admin dahsboards and so much more. In its essence, a bootstrap table it’s a great way to show data.


Read More

Web Design Trends To Watch in 2017

You never get a second chance to make a first impression about your website, so you better be sure that you deliver the right message to your users, connecting with them, in order to build trust and respect. Be sure you know the web design trends of 2017.

It’s time to take a look at your existing design because 2017 will be a year of new ideas and new visual concepts to explore. BootstrapBay prepared for you some useful information and trends. Let’s take a look.


Read More

Bootstrap Modal with HTML

How to create a working Bootstrap Modal with HTML

Bootstrap Modal is very popular and important for the User Interface (UI). In this tutorial, we will learn how to create a Bootstrap Modal in 2 minutes.  It offers you a way to make information available for the user, without crowding what he sees at once.

The Bootstrap Modal is one of the most popular plugins offered by Bootstrap. This is a multi-purpose popup built with HTML, CSS and JavaScript. Basically, the modal is a scripted element that overlays over a website page.

Using the Bootstrap Modal plugin it is one of the best ways to load content inside a popup screen without writing any JavaScript.


Read More

Bootstrap Contact Form

How to Create a Working Bootstrap Contact Form with PHP

Contact forms are one of the most common elements found on a web page, and they can be used to gather just about any type of information required from your users.

Fortunately, designing contact forms with Bootstrap is a breeze with all of the built-in classes available. But since Bootstrap is only a front-end framework, we need to introduce added functionality in order for to make the contact form functional.

In this step by step tutorial, we’re going to be creating a working Bootstrap contact form with PHP, a popular server-side language. Our contact form will also have built-in spam prevention and form validation. (more…)

Read More

Bootstrap Button Styles

5 Easy Ways to Modify Your Bootstrap Button Styles

In the following tutorial, we’re going to show you 5 easy ways to modify your Bootstrap button styles. This is a quick and easy way to differentiate your site from the default Bootstrap look. 

If you want to see more examples and a complete tutorial, you can check out our new article about Bootstrap 4 Buttons.

Initial Setup

We modified the default Bootstrap .btn class with the following CSS styles. These styles are only required if you’re looking to achieve the same look and feel as our button pack. Otherwise, you can stick with the default Bootstrap styles for now.

.btn {
    padding: 14px 24px;
    border: 0 none;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

.btn:focus, .btn:active:focus, {
    outline: 0 none;

.btn-primary {
    background: #0099cc;
    color: #ffffff;

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,, .open > .dropdown-toggle.btn-primary {
    background: #33a6cc;

.btn-primary:active, {
    background: #007299;
    box-shadow: none;

Now that we’ve modified our .btn class, let’s go over our custom button classes.

Sharp Buttons

To create sharp buttons, simply set your border radius to 0. {

See the Pen YPKbxW by BootstrapBay (@bootstrapbay) on CodePen.

Outline Buttons

The first step in creating an outline button is to remove the background. Since we’ll be increasing the border width, you also need to reduce the button padding. Otherwise, your button will appear oversized.

.btn.outline {
	background: none;
	padding: 12px 22px;

Next, you need to increase the thickness of the border and change the color to match the border.

.btn-primary.outline {
	border: 2px solid #0099cc;
	color: #0099cc;

Finally, you can add some hover effects by modifying the color and border colors when hovering over the button.

.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active,, .open > .dropdown-toggle.btn-primary {
	color: #33a6cc;
	border-color: #33a6cc;
.btn-primary.outline:active, {
	border-color: #007299;
	color: #007299;
	box-shadow: none;

See the Pen PwYvaO by BootstrapBay (@bootstrapbay) on CodePen.

Gradient Buttons

With gradient buttons, you’ll need a starting and ending color. While a typical linear gradient starts with one color and fades to another, this example has a hard shift in color halfway through the button. You’ll notice all the different lines we’ve added and that’s simply for compatibility across older browsers.

.btn-primary.gradient {
	background: -moz-linear-gradient(top,  #33a6cc 50%, #0099cc 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#33a6cc), color-stop(50%,#0099cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #33a6cc 50%,#0099cc 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #33a6cc 50%,#0099cc 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33a6cc', endColorstr='#0099cc',GradientType=0 ); /* IE6-9 */

Next, we lighten the buttons when hovering over them.

.btn-primary.gradient:hover, .btn-primary.gradient:focus, .btn-primary.gradient:active,, .open > .dropdown-toggle.btn-primary {
	background: -moz-linear-gradient(top,  #66b2cc 50%, #33a6cc 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#66b2cc), color-stop(50%,#33a6cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #66b2cc 50%,#33a6cc 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #66b2cc 50%,#33a6cc 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66b2cc', endColorstr='#33a6cc',GradientType=0 ); /* IE6-9 */

Finally, we darken the buttons when they’re active/clicked.

.btn-primary.gradient:active, {
	background: -moz-linear-gradient(top,  #267c99 50%, #007299 50%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#267c99), color-stop(50%,#007299)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #267c99 50%,#007299 50%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #267c99 50%,#007299 50%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #267c99 50%,#007299 50%); /* IE10+ */
	background: linear-gradient(to bottom,  #267c99 50%,#007299 50%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#267c99', endColorstr='#007299',GradientType=0 ); /* IE6-9 */

See the Pen PwYrQX by BootstrapBay (@bootstrapbay) on CodePen.

Rounded Buttons

To get the rounded look, simply increase the pixel size on the border radius.

.btn-lg.round {
	border-radius: 24px;

See the Pen MYgMBy by BootstrapBay (@bootstrapbay) on CodePen.

Raised Buttons

First, you need to create a box shadow to give the effect that the button is raised.

.btn-primary.raised {
	box-shadow: 0 3px 0 0 #007299;

Then, you need to remove the box shadow and modify the margins when the button is activated.

.btn-primary.raised:active, {
	background: #33a6cc;
	box-shadow: none;
	margin-bottom: -3px;
	margin-top: 3px;

See the Pen ogvrME by BootstrapBay (@bootstrapbay) on CodePen.

Download The Button Pack

I hope you found this tutorial helpful. If you liked these button styles, make sure to download the button pack.

Read More

Bootstrap Editors

7 Bootstrap Editors for Rapid Development of Responsive Websites

If you are just starting to learn Bootstrap, we have created a series of tutorials called 14 Days of Bootstrap 4 that can help you.


Bootstrap has already made responsive web development a lot easier. But what if you didn’t have to write out all that code by hand? What if you could select the Bootstrap components you want to work with, and drag them onto your canvas?

Well, that’s where a Bootstrap editor comes in.

Bootstrap editors and builders make it easier to prototype, test and build responsive websites. Although each editor is different, they all feature some form of drag and drop functionality using Bootstrap’s huge library of components.

In this post, we’ve compiled a list of some of the best Bootstrap editors and builders currently on the market. Each editor has its own unique feature set and pricing structure (some of which are free) so the best option for you will depend on your own unique situation. (more…)

Read More

bootstrap vs foundation

Bootstrap vs. Foundation: Which Framework is Better?

If you’re a web designer who’s looking for a sleek, simple and responsive front-end framework, you’ve probably heard of both Bootstrap and Foundation. That’s because these are the two most popular frameworks around right now.

In your mind, you’re probably also thinking…Bootstrap vs. Foundation…Bootstrap vs. Foundation! Which should I use? Which can get me to where I have a fully functioning, new website more efficiently? Relax—we’ve got you covered.

Before we dive into the details of each framework, know that each one has its pros and cons. At the end of this blog post, you’ll make a decision on which is better based on your unique situation, your needs and your familiarity with code in the first place. (more…)

Read More

Bootstrap icon fonts

Bootstrap Icon Fonts: 7 Essential Resources

If you’re using Bootstrap, then you’re most certainly designing responsive layouts. And while responsive design has done wonders for creating mobile friendly web pages, it has also created new issues for designers.

One of these issues is the use of icons. The problem with image icons is that they don’t scale well and they’re difficult to manipulate without the help of an image editor. They can also add to the weight of a website and lead to slower load times.

The solution? Icon Fonts. (more…)

Read More