How to align svg icon and text content in same line towards right side (Right aligned) in bootstrap-CodePudding

Hi I tried to align icon and text towards right side. but its not happening . am attaching the design herewith .

Status description and icon towards right side of screen

I tried code below - please let me know if there is any options available.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div class="col-1 icon1">
  <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
                <circle cx="8" cy="8" r="8"/>
              </svg>
  <div class="p-2" id="numOfStatus">Completed</div>
</div>
</div>

CodePudding user response：

You can use flexbox to move the element to right

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
   <div class="row">
      <div class="col-12 icon1">
         <div class="d-flex justify-content-end align-items-center">
            <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="orange" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Not Started</div>
             <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="red" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Progress</div>
             <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill">
               <circle cx="8" cy="8" r="8"/>
            </svg>
            <div class="p-2" id="numOfStatus">Completed</div>
         </div>
      </div>
   </div>
</div>

CodePudding user response：

While you work on improving the question, I'll take a guess at what you might need. By putting a flexbox class on the row and adding an empty flex column we push the small fixed-width column to the right.

Note that the correct column class for Bootstrap 4 is col-xs-1. Be sure you're following the correct version documentation.

.col {
  background: pink;
}

.col-xs-1 {
  background: #ddd;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div class="container">
  <div class="row d-flex">
    <div class="col"></div>
    <div class="col-xs-1 icon1">
      <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
                <circle cx="8" cy="8" r="8"/>
              </svg>
      <div class="p-2" id="numOfStatus">Completed</div>
    </div>
  </div>
</div>

To give the layout a more modern, fully-flexible fit, use only flex classes (including on the icon container):

.d-flex > div {
  background: pink;
}

.d-flex > div:last-child {
  background: #ddd;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div class="container">
  <div class="d-flex">
    <div class="flex-grow-1"></div>
    
    <div class="icon1 d-flex">
      <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="#2DB757" class="bi bi-circle-fill float-right" style="margin: 18px;">
        <circle cx="8" cy="8" r="8"/>
      </svg>
      
      <div class="p-2" id="numOfStatus">Completed</div>
    </div>
  </div>
</div>