harsh harsh - 17 days ago 7
CSS Question

show <hr> tag with font-awesome icon and text together inline with responsive behaviour

I want to show three different elements inside tag in one single line with complete responsive behavior. Three elements are, (i): font-awesome icon user, (ii): label text and (iii): hr tag. I am using bootstrap.

Here is my HTML,

<div class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">
<form class="form">
<div class="row traveller-divider">
<div class="inline-block">
<span class="fa fa-user"></span>
<label>Traveller</label>
</div>
<hr>
</div>
</form>
</div>
</div>


I have tried something with CSS but it doesn't work. Any help would be great. Thank you.

Answer

Use CSS Positioning. Make .traveller-divider - relative & make hr - absolute.

Have a look at the snippet below for better understanding:

.traveller-divider {
  position: relative;
}

.inline-block {
  display: inline-block;
  padding: 5px 10px;
  background: white;
  position: relative;
  z-index: 2;
}

hr {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  margin: 0;
  z-index: 1;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="panel-collapse collapse" role="tabpanel">
    <div class="panel-body">
        <form class="form">
            <div class="row traveller-divider">
                <div class="inline-block">
                    <span class="fa fa-user"></span>
                    <label>Traveller</label>
                </div>
                <hr>
            </div>
        </form>
    </div>
</div>

Hope this helps!

Comments