How Can I Override Bootstrap Styles to Customize its Look and Feel?

Overriding Bootstrap Styles

How do you customize the built-in stylings in Twitter Bootstrap? For instance, you may want to alter the default left-alignment of the sidebar class to display it on the right. As a newbie using HAML and SASS, this may pose a challenge.

Solution:

A simplified approach is to incorporate your stylesheet after Bootstrap's. This allows you to redefine and override Bootstrap's rules. For example:

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

To shift the sidebar to the right in site-specific.css:

.sidebar {
    float: right;
}

This technique remains valid even if you're using HAML and SASS, as long as you adhere to the same principle of overriding styles by declaring them after Bootstrap's stylesheet.

The above is the detailed content of How Can I Override Bootstrap Styles to Customize its Look and Feel?. For more information, please follow other related articles on the PHP Chinese website!