twitter bootstrap 3 - How to set the specificity of a css over-ride class for XPages -

this starts previous question asked think know needs done not how. have block of code defines pager in bootstrap , applies bootstrap style it:

<xp:pager partialrefresh="true" id="pager1" for="repeat1"     panelposition="left" styleclass="bootstrappager">     <xp:pagercontrol type="previous" id="pagercontrol1"         styleclass="bootstrappagerprevious">     <xp:this.value><![cdata[«]]></xp:this.value>     </xp:pagercontrol>     <xp:pagercontrol type="group" id="pagercontrol2"             styleclass="bootstrappagermiddle">     </xp:pagercontrol>     <xp:pagercontrol type="next" id="pagercontrol3"         styleclass="bootstrappagernext">         <xp:this.value><![cdata[»]]></xp:this.value>     </xp:pagercontrol> </xp:pager> 

then in css load have over-ride bootstrap class bootstrappager:

.bootstrappager {   display: inline-block;   padding-left: 0;   border-radius: 4px;   margin-left: 10px;   margin-bottom: 2px;   margin-top: 2px;   line-height: 1.42857; } 

the default .bbotstrappager has top , bottom margin of 10px , want reduce 2px. tried !important not work. have read bit css specificity , think problem is. in context how go setting specificity in .bootstrappager class ranks higher default class? css experience not great getting there.

set margins way:

.pagination {     margin: 0px; }  .bootstrappager {     margin-left: 10px;     margin-bottom: 2px;     margin-top: 2px;     line-height: 14px; } 

the pager gets rendered <div> , included <ul>.
<ul> tag has css class pagination margin of 20px on top , bottom.
so, first set margin 0px overwriting class pagination css resource.

then can set margins in css class bootstrappager.

alternatively, can put changes class pagination , omit class bootstrappager.