How do I change <hr/> tags to vertical lines on larger screens?

user_261010 0
Viewed 37

How do I change these <hr/> tags to vertical lines automatically when page width increases to allow three columns? On small devices, they properly separate rows. I'm using Bootstrap v4.

    <div class="row">
        <div class="col-md-4 col-sm-6 p-4">
            <h2>Have a Question?</h2>
        </div>
        <div class="col-md-4 col-sm-6 text-center p-4">
            <hr/>
            <h3>FAQs</h3>
            <p>Get more information about ordering, payments and product delivery.</p>
        </div>
        <div class="col-md-4 col-sm-6 text-center p-4">
            <hr />
            <h3 class="mb-4">Call Us</h3>
            <p>Contact our product specialists</p>
        </div>
    </div>
bootstrap-4 twitter-bootstrap css
2 Answers

try this using media query to hid the hr and then just add a left border, change the min-width: 600px to match the screen size you are targeting

test here on jsfiddle

@media only screen and (min-width: 600px) {
  hr {
    display: block;
    visibility: hidden;
  }
  div.p-4 {
    display: block;
    border-right: 1px solid #C8C9CA;
  }
  
  div.p-4:last-child {
    border-right: none;
  }
}
<!-- just added bootstrap for testing - CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="row">
    <div class="col-md-4 col-sm-6 p-4">
        <h2>Have a Question?</h2>
    </div>
    <div class="col-md-4 col-sm-6 text-center p-4">
        <hr/>
        <h3>FAQs</h3>
        <p>Get more information about ordering, payments and product delivery.</p>
    </div>
    <div class="col-md-4 col-sm-6 text-center p-4">
        <hr />
        <h3 class="mb-4">Call Us</h3>
        <p>Contact our product specialists</p>
    </div>
</div>

user_66518400

Because there is no vertical-rule element this makes it tough because the only option would be to use transform: rotate(90deg);. However, this doesn't satisfy the positioning of the dividers.

Instead, use a border with padding to position the dividers.

@media only screen and (min-width: 767px) {
  hr {
    display: none;
  }
  .col-md-4 {
    border-right: solid 2px #ebebeb;
  }
}


/* 767px is bootstraps sm breaking point */
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class="row">
  <div class="col-md-4 col-sm-12 text-center p-4">
    <h2>Have a Question?</h2>
  </div>
  <div class="col-md-4 col-sm-12 text-center p-4">
    <hr/>
    <h3>FAQs</h3>
    <p>Get more information about ordering, payments and product delivery.</p>
  </div>
  <div class="col-md-4 col-sm-12 text-center p-4">
    <hr />
    <h3 class="mb-4">Call Us</h3>
    <p>Contact our product specialists</p>
  </div>
</div>

user_164963570
Related