AngularJS

5 Essential Resources for Learning AngularJS

If you’re looking to build a dynamic web application, AngularJS is a front-end framework you might want to consider. Angular helps you create responsive and fast websites that are easy to test. It’s also backed by Google and quickly gaining a lot of momentum in development circles.

When I looked at the items on our own marketplace, it was no surprise that our two best selling Bootstrap admin templates leverage the power of AngularJS. Further proof that the framework is gaining the hearts of many.

Although there are plenty of benefits to using Angular, it’s not exactly the easiest to learn. On top of this, the documentation can be a bit difficult to follow as well. For this reason, we’ve compiled the 5 best resources for learning AngularJS. (more…)

Read More

Built With Bootstrap

30 Must See Websites Built With Bootstrap

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.

 

Tell me if you’ve heard this before…

“All Bootstrap websites look the same.”

This can be true, but only if you don’t make any modifications to the default Bootstrap styling.

You see, Bootstrap can be a fantastic starting point for responsive front-end development. And if you invest a bit of time into styling your website’s theme, the results can be spectacular.

Luckily, I didn’t have to look too far to find some amazing examples of websites built with Bootstrap. The following gallery is a curated list of awesome showcases from the Bootstrap ExpoLove Bootstrap and Built With Bootstrap. (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, .btn.active:focus {
    outline: 0 none;
}

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

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

.btn-primary:active, .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.

.btn.sharp {
  border-radius: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, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
	color: #33a6cc;
	border-color: #33a6cc;
}
.btn-primary.outline:active, .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, .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, .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, .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

CSS transitions buttons

4 Simple CSS Transitions to Enhance Your Buttons

Call to actions are one of the most important elements of a website, theme or template. When you think about it, almost every web page is designed with the goal of making the user take action.

So why not dress them up a little bit and add some simple CSS transition effects.

In this tutorial, I’ll go over 4 simple CSS transitions you can use to enhance your buttons and add a little flare to your web page.

(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

bootstrap 3 carousel

Bootstrap 3 Carousel Tutorial

Bootstrap includes a handy plugin and component for cycling through slider images like a carousel. Sliders can be a great way to feature important content on your website.

In the following tutorial, we’ll show you exactly how you can add a carousel to your Bootstrap 3 website. It simply requires some HTML markup and a couple lines of JavaScript if you want to adjust the settings using that method. (more…)

Read More

Customizing Bootstrap

How to Customize the Default Bootstrap Style, the Right Way

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.

 

If you take a look at the source code of some of your favourite websites, we wouldn’t be surprised if you found common elements of the Bootstrap framework being put to use. As Bootstrap is arguably the most popular front-end framework for web development, many designers and developers employ the framework for rapid responsive development.

But why do some of these sites look nothing like the default Bootstrap theme? Quite simply, additional CSS stylesheets were added or the default Bootstrap stylesheets were modified (let’s disregard LESS or SASS for the sake of this tutorial).

In this short tutorial, we’ll show you how to do this in a manner that is clean, easy to maintain, and allows you to update to future versions of Bootstrap without breaking your custom styles (providing that the update is minor). (more…)

Read More

color scheme generators

7 Color Scheme Generators to Help Pick the Perfect Palette

Balancing color is important in all walks of life. Whether you’re decorating your house, choosing an outfit or even planning your wedding, you’re always trying to balance the right colors.

Web design is no different.

Choosing an appropriate color scheme is always a key consideration when building a website. There’s a reason why environmental websites almost always use a color palette with greens and other earth tones. The colors must match the brand.

Unfortunately, it can sometimes be challenging to find that perfect color palette. For this reason, we’ve compile a list of the best color scheme generators on the web. These tools will make it much easier to establish the perfect color scheme for all your web designs. (more…)

Read More

lorem ipsum alternatives

Top 10 Lorem Ipsum Alternatives

So you’re a theme developer and you’re tired of using the same old boring Lorem Ipsum as a dummy text generator.  We hear you loud and clear.

But what other choice do you have? You need to display some text right?

You’re not the first designer who’s faced this problem and that’s why we searched the web for the best Lorem Ipsum alternatives to incorporate into your next project. Some are very useful while others are just plain hilarious. When developing your next Bootstrap theme, make sure to give one of these a try. (more…)

Read More