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

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>

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>

CSS · Bootstrap, Bootstrap makes use of certain HTML elements and CSS properties that that appropriately scales up to 12 columns as the device or viewport size increases. full-width and the other half-width --> <div class="row"> <div class="col-xs-12  2 A hr element next to another full sized element (bootstrap 3.3.7) Oct 16 '19. 2 Const inside for loop Jan 24. 2 Angular access routing parameter from parent Jan 13.

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

Cards · Bootstrap, Built with flexbox, they offer easy alignment and mix well with other Bootstrap Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. are added and placed next to each other by adding .card-link to an <a​> tag. Card headers can be styled by adding .card-header to <h*> elements. Visibility of elements in bootstrap with Examples Bootstrap | Sizing an element with Examples As the name suggests sizing means to adjust the size of an element relative to its parent with the help of height and width utilities(in px or in %).

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>

Bootstrap · The world's most popular mobile-first and responsive , It's made for folks of all skill levels, devices of all shapes, and projects of all sizes. Full of features. With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and Take Bootstrap 4 to the next level with premium themes from our official marketplace—all built on  In addition, all <p> elements have a bottom margin that equals half their computed line-height (10px by default). Typography The elements below are HTML elements that will be styled a little bit differently by Bootstrap than browser defaults.

Jumbotron · Bootstrap, <div class="jumbotron"> <h1 class="display-4">Hello, world!</h1> <p class="lead​">This is a simple hero unit, a simple jumbotron-style component for calling  For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements. You may alternatively use an inline element with .small in place of any <small>.

Front-end Development with ASP.NET Core, Angular, and Bootstrap, <hr /> < footers <p>© 2017 - Triathlon RaceTracking.</p- </footers </div<​environment include="Development"> <script ="https://ajax.aspnetcon.com/​ajax/bootstrap/3.3.7/bootstrap. min.js" It does so with the help of the link tag helper, which generates the link controllers' actions just by specifying their name. The Bootstrap 3 Classes Cheat Sheet will help you quickly find documentation for particular Bootstrap CSS styles, components, and grids. Download the Free Bootstrap Cheat Sheet PDF now!

Display property · Bootstrap, Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size. To hide elements simply use the .d-none class​  Input Sizing in Forms. Set the heights of input elements using classes like .input-lg and .input-sm.. Set the widths of elements using grid column classes like .col-lg-*and .col-sm-*.

Comments
  • Use row and col for width.
  • oh damn, I just saw that I didnt use the right bootstrap version in my snipped. I am using Version 3.3.7 and this methode dont work with this verion :/ I will edit my question. If you still now an answere for bootstrap 3.3.7 post it too and let the other code here as "code for bootstrap 4.0". When I got enough rep for voting, you will get +1.
  • okey, I just copied the classes from 4.3 to my page and it works :)
  • The <hr> element should still be horizontal, it should just take the whole space like a unmodified <hr> element.
  • @LastChar23 i updated my code use these style on hr
  • That dont seem to work. Now the Icons are close above and under the line. ps, you could add the snipped from my question to your answere and modify it