Customizing Bootstrap

orlando web deisgn bootstrap

Orlando Web Design & Development

Twitter’s Bootsrap is a powerful front-end framework for faster and easier web development.

You can customize Bootsrap’s CSS the following ways:

1. Customize before downloading:

Orlando web design: customize bootstrap

Go to the Official Bootstrap Website and add your own custom CSS before downloading the Bootstrap files.

2. Add your own CSS:

Create your own CSS document and place it below the Bootsrap CSS file in the <head>of the HTML document.

<!-- Bootstrap's CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Your CSS -->
<link href="css/mystyles.css" rel="stylesheet" media="screen">

The last declared styles are the heaviest and they override any styles declared before.

a. Example one: Modify Existing Styles

Orlando web design: modified bootstrap button

To create a button in Bootstrap you will use the code:

     <a href="contact.html" class="btn"> This is a button</a>


<button href="contact.html" class="btn btn-large">This is a button</button>

Bootstrap buttons have a round corners. These are the styles that give the buttons the round corners:

.btn {
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
      border-radius: 4px;

In your CSS file “mystyles.css”, you can override the round corners by adding the code:

.btn {
     -webkit-border-radius: 0px;
     -moz-border-radius: 0px;
      border-radius: 0px;

b. Example Two: Add New Styles

Orlando web design: custom bootstrap class

You can create new styles to customize the way your website looks. For example, if you want to create a custom contact button, follow these steps:

1. Create a new class in the CSS file “mystyles.css”:

      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;

2. Add the new class to the html

<a href="contact.html" class="btn contactB"> This is a contact button</a>

The great thing about having your custom styles in a separated CSS document is that it will make upgrading Bootstrap a breeze since your new styles will not get overridden when you replace the old Bootsrap files with the new.

3. Bootstrap Third Party Generators

Styling Generators:

Buttons Generators:

Color Generators:

Theme Generators:

4. Using LESS

Bootstrap is build with LESS. LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

Category: Orlando Web Design Tags: , No Comments


M5 Design Studio

We are a small, but creative and passionate team of designers and developers specializing in web design, graphic design, branding & digital marketing.

orlando web design company

How to add animation to a website

Orlando Web Design Company Small, simple animations are fun and interesting! They can keep your users engaged and spice
Orlando Wordpress Design

Best Wordpress Responsive Lightbox

Orlando WordPress Design & Development After trying many lightbox plugins I finally found the best responsive light
bootstrap responsive layout

Bootstrap’s Responsive Layout

What is responsive web design? Responsive web design responds to the user’s behavior and environment based on screen

Comments are closed.