A hr element next to another full sized element (bootstrap 3.3.7)

user_12057496 0
Viewed 148

I want to get the <hr> element next to my Icons, I set the style of Display to .inline-grid to let the hr element stay right next to my Icons. The Problem is that I need to give it a width to because inline-grid takes it full size width.

How can the hr element be full size and still be between the Icons?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
    <div class="container">
      <div class="row">
        <span style="cursor: pointer">
          <span class="glyphicon glyphicon-chevron-down"></span>
          <hr style="width: 100px;margin-left: 0px;margin-right: 0px;display: inline-grid;margin-bottom: 0px;"/>
          <span class="glyphicon glyphicon-chevron-down"></span>
        </span>
      </div>
    </div>

Edit: the <hr> element should still be horizontal. (Icon horizontal line Icon) <= this should take the complete row width.

Edit2: wrong bootstrap Version in snipped. Changed to 3.3.7.

twitter-bootstrap css html
3 Answers

Instead display inline-grid use display flex.

hr {
  flex:1;
}

.wrapper {
  cursor: pointer;
  width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="wrapper d-flex justify-content-center align-items-center">
      <span class="glyphicon glyphicon-chevron-down">V</span>
      <hr/>
      <span class="glyphicon glyphicon-chevron-down">V</span>
    </div>
  </div>
</div>

user_48294430

Set these properties in style vertical-align: middle; margin: 0;

user_113933810

You can try this :

<div class="row">
<span style="cursor: pointer">
  <span class="glyphicon glyphicon-chevron-down">V</span>
  <hr class="m-0 pl-3 pr-3">
  <span class="glyphicon glyphicon-chevron-down">V</span>
</span>

user_115493190
Related