'place multiple svg in one div row bootstrap5

I want to place multiple icons in a div element that should resize when the browser window change size.

My problem is, the svgs are always below one another, unless I give them fixed pixel sizes, which means they wont resize any longer. I would wish for them to have a fixed minum size, but increase size with the growing parent div:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bg-dark text-white">
    <div class="col-sm-2  d-flex align-items-center">
        <span class="text-end">hello</span>
    </div>
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">1</span>
        </div>
        <div class="row">
            <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
            <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
        </div>
    </div>
    <div class="col-sm-2">
        <div class="row">
            <span class="text-center">this one is wider</span>
        </div>
    </div>
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">3</span>
        </div>
    </div>    
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">4</span>
        </div>
         <div class="row">
            <svg xmlns="http://www.w3.org/2000/svg" width="10%" height="10%" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
            <svg xmlns="http://www.w3.org/2000/svg" width="10%" height="10%" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
        </div>
    </div>
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">5</span>
        </div>
    </div>           
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">6</span>
        </div>
    </div>        
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">no resize :(</span>
        </div>
        <div class="row">
          <p>
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
            <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>     
           </p>
        </div>
    </div> 
    <div class="col-sm-1">        
        <div class="row text-center">
            <span class="text-center">8</span>
        </div>
    </div>
    <div class="col-sm-1 d-flex align-items-center">
        <span class="text-end">...</span>
    </div>

How can I alter my SVG settings to make at least two of them always fit next to each other in my div class="col" element?

htmlcsstwitter-bootstrapsvgbootstrap-5


Solution 1:[1]

Since you're using Bootstrap, I recommend you to create another col layout inside your row, with two col-6 columns that span half of the row width.

Check out the snippet below - the additional class .svg-column is only used for minor spacing adjustments.

.svg-column {
  text-align: center;
  padding: 0.5em;
  place-self: center;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row bg-dark text-white">
  <div class="col-sm-2  d-flex align-items-center">
    <div class="row text-center">
      <span class="text-center">hello</span>
    </div>
  </div>
  <div class="col-sm-3">
    <div class="row text-center">
      <span class="text-center">1</span>
    </div>
    <div class="row">
      <div class="col-6 svg-column">
        <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
      </div>
      <div class="col-6 svg-column">

        <svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%" viewBox="0 0 24 24" fill="none" stroke="red" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
      </div>
    </div>
  </div>

  <div class="col-sm-2 d-flex align-items-center">
    <span class="text-end">world</span>
  </div>

</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions