0

I would like a button between two hr elements with a bit of spacing wither side of the button and for this to remain the same when collapsing. I am using the Bootstrap framework.

I have the desired effect when at full screen.
I have got the current effect using the second answer from this question:

Add centered text to the middle of a <hr/>-like line

Therefore, my code is the same as what the answer provided. The first answer doesn't provide the spacing either side of the button.

Using media queries I am able to maintain the desired effect until I reach the 768px width break. Where this happens:

The right hr element continues to collapse into the button, not providing the spacing I need and the left hr element remains the same width.
I can't continue to use media queries as I would have to apply them per pixel!

There must be an elegant solution to this? I'm assuming better use of columns and width percentages ?

Any help would be appreciated.

Community
  • 1
  • 1
Smiter
  • 1,069
  • 1
  • 14
  • 33

2 Answers2

3

Using Bootstrap this solution should work fiddle:

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-5">
            <hr>
        </div>
        <div class="col-xs-2">
            <a class="btn btn-md btn-primary">Add</a>
        </div>
        <div class="col-xs-5">
            <hr>
        </div>
    </div>
</div>
Dai
  • 1,510
  • 1
  • 11
  • 12
  • It should be noted however that using an `
    ` here would actually be semantically incorrect [**hr @ MDN**](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr)     – Paulie_D Aug 13 '14 at 10:33
0

You can use image for these lines by simply adding img tag:
CSS

img{
width:200px;
border:0;
height:10px;
background:url(http://goo.gl/bPZONP);
}

HTML

<div><img src="http://goo.gl/bPZONP">Button<img src="http://goo.gl/bPZONP"></div>


Demo http://jsfiddle.net/qW6z9/

napendra
  • 378
  • 4
  • 12