Create Horizontal Line with Words in the Middle for Bootstrap

Question

I found this fiddle on the following post CSS technique for a horizontal line with words in the middle

Is there anyway to limit the width? I've tried placing a max-width or just width property to both the .group, .item, and .line; however none of it works. I understand there are limitations to placing a width on a display: table-cell.

I have tried the other workarounds on that forum; however they don't work with bootstrap. I need it to work with bootstrap, and I need the background to be transparent (as it's going over an image). Please see the code below:

CSS:

.group { 
  display: table;
  width: 100%;
  font-size: 3em;
}
.item {
  display: table-cell;
}
.text { 
  white-space: nowrap;
  width: 1%;
  padding: 0 10px;
}
.line {
  border-bottom: 1px solid #000;
  position: relative;
  top: -.5em;
}

HTML:

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

score 1 · Accepted Answer · answered Jul 08 '15 at 18:06

You can keep the css that is provided and use the width property on the group but you have to realign it to the center using margin: 0 auto;

.group { 
    display: table;
    width: 50%;
    font-size: 3em;
    margin: 0 auto;
} 
.item {
    display: table-cell;
}
.text { 
    white-space: nowrap;
    width: 1%;
    padding: 0 10px;
}
.line {
    border-bottom: 1px solid #000;
    position: relative;
    top: -.5em;
}

score 0 · Answer 2 · answered Jul 08 '15 at 17:42

I made a fiddle which shows a simple way to do it. Just adjust the padding if you want shorter lines, and if you want the line to be less in width you can decrease width and set a left property which will be 100% minus the width divided by 2. So if you have a width of 80% set the left property to left: 10%;. Hope it makes sense.

http://jsfiddle.net/yr9dg30b/1/

<div>
    <hr>
    <h1>This is text</h1>
</div>

div {
    position: relative;
    text-align: center;
}

h1 {
    margin: 0;
    background-color: white;
    z-index: 1000;
    display: inline-block;
    margin: 0 auto;
    padding: 50px;
}

hr {
    position: absolute;
    top: 50%;
    left: 10%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 80%;
    margin: 0;
    z-index: -1000;
}

Create Horizontal Line with Words in the Middle for Bootstrap

2 Answers2