All these tips will work, but a simpler way might be to include your stylesheet after the Bootstrap styles.
If you include your css (site-specific.css
) after Bootstrap’s (bootstrap.css
), you can override rules by redefining them.
For example, if this is how you include CSS in your <head>
<link rel="stylesheet" href="https://stackoverflow.com/questions/8084964/css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />
You can simply move the sidebar to the right by writing (in your site-specific.css
file):
.sidebar {
float: right;
}
Forgive the lack of HAML and SASS, I do not know them well enough to write tutorials in them.