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>

or

<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”:

.contactB{
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background-image:none;
      background-color:hotpink;
}

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

Related Posts

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 ... Read More »
web design orlando lesson 6

Orlando Web Design: CSS Page Layout – Understanding CSS Positioning

Orlando Web Design & Development CSS Page Layout: Understanding CSS Positioning There are 3 ways of creating CSS l... Read More »
dreamweaver define site & connect ftp

Orlando Web Design: Defining a site in Dreamweaver

Orlando Web Design & Development Dreamweaver is used to create and edit web pages on your local computer. Once th... Read More »

Leave a Comment

Your email address will not be published. Required fields are marked *


*