How can I overwrite media queries defined in Bootstrap CSS

Question

I do not want media queries defined in bootstrap CSS to override my custom CSS when the user resizes his window.

my HTML code

<div class="row"> <div class="col-xs-6"> <dl class="dl-horizontal dl-horizontal-info custom"> <dt>item 1</dt> <dd>description 1 </dd> <dt>item 2</dt> <dd>description 2</dd> <dt>item 3</dt> <dd>description 3</dd> <dt>item 4</dt> <dd>description 4</dd> <dt>item 5</dt> <dd>description 5</dd> </dl> </div> <div class="col-xs-6"> <dl class="dl-horizontal dl-horizontal-info custom"> <dt>item 11</dt> <dd>description 11 </dd> <dt>item 12</dt> <dd>description 12</dd> <dt>item 13</dt> <dd>description 13</dd> <dt>item 14</dt> <dd>description 14</dd> <dt>item 15</dt> <dd>description 15</dd> </dl> </div> </div> 

CSS

 @import url("http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/cerulean/bootstrap.min.css"); @import url("http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"); .custom > dt{width:120px;} .custom > dd{margin-left:130px} 

http://jsfiddle.net/afLka00x/

If I resize the window to 768 pixels, the media request from Bootstrap CSS overrides my custom css and dt dd is vertically aligned, I want them to be aligned horizontally.

How can i do this?

I found this code in Bootstrap.css, calling this

CSS

 @media (min-width: 768px) { .dl-horizontal dt { float: left; width: 160px; clear: left; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-horizontal dd { margin-left: 180px; } } 

so i changed above this code in my custom.css

CSS

 @media (min-width: 768px) { .dl-horizontal dt { width:120px; } .dl-horizontal dd { margin-left:130px } } 

But dl-horizontal dl-horizontal-info is still aligned vertically after resizing the window.

I want my dl to look like this even after resizing the window.

and don't like

Answer 1

I do not want media queries defined in bootstrap CSS to override my custom CSS when the user resizes his window.

Well, they do not.

Bootstrap does not "override" your specified formatting in this regard - but it adds float:left , which leads to the behavior you want in the first place only when the width of the viewport is above 767 pixels:

 @media (min-width: 768px) .dl-horizontal dt { float:left; } } 

So, below 768px this formatting is missing, and therefore the default styling from the browser stylesheet is applied.

If you want your dt float to the left even below this viewport width, you should also add it by your own rules:

 .custom > dt{ float:left; width:120px; } 

http://jsfiddle.net/afLka00x/1/

Answer 2

Try this in your Custom.css

 @media (min-width: 768px) { .dl-horizontal > dt{ width: 120px!important;float: left; clear: both;} }