css - Double Line Behind Header Stops Working When Bootstrap Applied -


the stack overflow community helped me figure out how add 2 different sized lines behind section title on website. method can viewed in js fiddle: http://jsfiddle.net/dczr4/1/

it working properly, until included twitter bootstrap 3.0 css in layout. now, 2 lines appear right on top of each other, making 1 thick line behind text. can seen here: http://onedirectionconnection.com/tester/

if advice me on causing hiccup, appreciated.

the css header below:

.section-title{     font-family: 'lato', 'asap','quicksand', 'droid sans', sans-serif;     position: relative;     font-size: 30px;     z-index: 1;     overflow: hidden;     text-transform: uppercase;     text-align: center; }  .section-title:before, .section-title:after {     position: absolute;     top: 40%;     overflow: hidden;     width: 50%;     height: 4px;     content: '\a0';     border-bottom: 3px solid #da5969;     border-top: 1px solid #da5969; } .section-title:before {     margin-left: -52%;     text-align: right; } .section-title:after {     margin-left:2%;     text-align:left; } 

and html is:

<div class="section-title">title goes here</div> 

(in jsfiddle, defined h1, changed in layout)

thanks in advance offered!

bootstrap applies box-sizing: border-box default.

you need reset box-sizing:content-box particular requirement.

.section-title:before, .section-title:after { position: absolute; top: 40%; overflow: hidden; width: 50%; height: 4px; content: '\a0'; border-bottom: 3px solid #da5969; border-top: 1px solid #da5969; box-sizing: content-box; /* + vendor specific versions here */ } 

Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -