CODEWITHSUNDEEP
htmlcssbootstrap-4
kores59
kores59

Reputation: 443

Stretch any number of spans inside div

I have my own carousel and I am trying to make navigations.

.carousel-nav-box {
  width: 100%;
}

.carousel-nav-item {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  width: auto;
  height: 5px;
  margin-left: 2px;
  margin-right: 2px;
  background: black;
  border: green;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="carousel-nav-box container">
  <div class="row">
    <span class="col-sm carousel-nav-item"></span>
    <span class="col-sm carousel-nav-item"></span>
  </div>
</div>

Spans inside container are dynamically generated from databse, so it could be any number. Problem is, that spans just don´t stretch to full width of container and they occupy only part of container. I need to make them on the full width container and make their width automatic depends of their number.

Upvotes: 0

Views: 36

Answers (1)

zgabievi
zgabievi

Reputation: 1202

You can you flex to achieve this functionality. Flex will stretch all child items; and they will stretch if you add flex: 1;

.carousel-nav-box {
  background-color: red;
  width: 100%;
}

.carousel-nav-box .row {
  display: flex;
}

.carousel-nav-item {
  min-height: 50px;
  margin-left: 2px;
  margin-right: 2px;
  background-color: black;
  border: 1px solid green;
  flex: 1;
}
<div class="carousel-nav-box container">
  <div class="row">
    <span class="col-sm carousel-nav-item"></span>
    <span class="col-sm carousel-nav-item"></span>
    <span class="col-sm carousel-nav-item"></span>
  </div>
</div>

Upvotes: 2

Related Questions