CODEWITHSUNDEEP
cssbootstrap-4
MattHodson
MattHodson

Reputation: 796

Make <li> act like a standard <div> using bootstap 4 columns

I'm wanting to use <ol> > <li> with bootstrap columns. I want them to behave actually how this code would if the <li class="col-6 col-md-3"> was a <div class="col-6 col-md-3">.

Is this possible?

ol.test {
  list-style-type: none;
  display: inline-block;
}

li {
  display: block;
}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />


<div class="row mt-4">
  <ol class="test">
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
    <li class="col-6 col-md-3">
      <div class="card mb-3 text-center">
        <img class="card-img-top" src="test.com/hi.png" alt="Card image cap">
        <div class="card-body">
          <h5 class="card-title m-0"><a href="#" class="similar-link stretched-link">test text</a></h5>
        </div>
      </div>
    </li>
  </ol>
</div>

Upvotes: 0

Views: 44

Answers (1)

David Morris
David Morris

Reputation: 120

Yes, this is absolutely possible. Just apply the column classes such as <li class="col-md-3">LIST ITEM</li>

I'd make sure to just wrap it in a <div class="row"></div> in order to clear the floats or as Kostas has mentioned, apply the .row to the ol

Upvotes: 1

Related Questions