How to avoid bootstrap from overriding id-called custom css?


Tags: html,css,twitter-bootstrap

Problem :

I want a div in my code to be horizontally center aligned, but also need to use bootstrap col-md-12 class. So I used the following.

<div id="canvas" class="col-md-12">

And I declared css as:

#page-body #canvas {
    border: 2px solid black;
    margin: 50px auto;
    padding: 10px;
    width: 60%;
}

However, this is being overridden by bootstraps float attribute:

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
}

I don't wish to use the !important or change the bootstrap code.

When I was looking for solutions, I found that

  1. Calling by id is suitable, which I have done without luck.
  2. I tried this problem's solution using the specificity calculator which gave 200:10 results, but still not working.
  3. My custom css link is placed after the bootstrap link

Is there a clean way to avoid this override?

The desired output is got when the col-md-12 class is not used but I want to use the bootstrap class.

UPDATE : Basically using class container instead of col-md-12 gave out the desired output, but does it have any side effects? JSFIDDLE



Solution :

<body>
    <div class="container">
        <div class="col-md-6 col-md-offset-3 bg-danger">
            <h1>Middle</h1>
        </div>
    </div>
</body>

This can be used as the answer for your requirement. Instead of using custom styles for making div centered horizontally you can use the offset style provided by bootstrap.

The class bg-danger is used for demonstration purpose only.


    CSS Howto..

    How to give reference to static resources like css,images,java script in JSP?

    How to make this layout more responsive in CSS?

    How to draw a lens like circle on mouseover

    how to change css of the image link when clicked?

    How to arrange two html buttons horizontally in a single line with equal width by completely fills the screen size

    How to remove the blue halo glow from jQuery Mobile input elements that receive focus

    How to make the opacity layer same size as img

    How to get next elements before a specific element using jquery or css

    How to put horizontal dropdown menu bar

    How do I disable warnings from Aspx files (HTML,CSS)

    How to copy the GTK style of a widget and apply it to another?

    how to make div fixed at a particular scroll level

    How to add formatting to my pagination

    How to increase spacing between dt tags

    How to force IE to place two div boxes next to each other in it's browser window?

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How do I add a mouseover drop shadow effect for circular images?

    How do you apply diferent colors from diferent css rules to the same object?

    How to remove some css properties without the paticular one using regular expression?

    How to improve the way I use Textmate for Ruby on Rails, HTML, CSS and Javascript?

    how to make unorder list all in same block and have gap within each link (CSS)

    How can I get this menu to hug the top of the page, widen out, and provide some space below it?

    how to make edges round in CSS?

    How to add two CSS Class to control in the code behind?

    How to push content div to footer div while keeping background in the picture

    How can I create this specific layout using html and css?

    How to pin the menu to the upper part of the screen?

    How to write CSS correctly when there are the same properties but with different prefixes for the various browser support?

    How to show a region on a image with CSS

    CSS/HTML : how to make something become absolute positioned once you scroll by it