Guide on positioning an svg icon and text content in the same row to be right-aligned using Bootstrap

I have attempted to align the icon and text towards the right side, but unfortunately, it is not working as expected. I am attaching the design for reference.

I have tried using the following code - please advise if there are any other options available.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384c5646">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+k" 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>

htmlcssangularbootstrap-4

Answer №1

Utilize flexbox for positioning the element to the 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>

Answer №2

As you make improvements to the question, I'll take a guess at what you might be looking for. By applying a flexbox class to the row and inserting an empty flex column, we can shift the small fixed-width column to the right.

It is important to note that in Bootstrap 4, the correct column class is col-xs-1. Make sure to refer to the appropriate version of the documentation.

.col {
  background: pink;
}

.col-xs-1 {
  background: #ddd;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1a3aeaeb5b2b5b3a0b181f5eff7eff1">[email protected]</a>/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 achieve a more contemporary and fully flexible layout, utilize 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ef8d80809b9c9b9d8e9fafdbc1d9c1df">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Forcibly altering the title name in HTML: a step-by-step guide

Currently, I am working on a project that consists of over 30 JS files and an index file. I recently changed the title of the page in the index file, but the new title only displays when I refresh the page. Once the refresh is complete, the old title reapp ...

javascripthtml

Creating a Jquery slider animation: step-by-step guide

I tried implementing a code example in jQuery, but I am struggling with achieving smooth transitions in my slides. The changes are happening too abruptly for my taste. How can I create animations that occur during the transition, rather than after it? f ...

jquerycss

Using CSS and Vue, you can customize the appearance of inactive thumbnails by displaying them

My goal is for a clicked thumbnail to display in color while the others show as grey. The active thumbnail will be in color, and I want inactive thumbnails to appear in grey. Here is what I am trying to achieve: Vue.component('carousel', { ...

javascripthtmlcssvue.jsvuejs2

ngx-loading is a fantastic addition to Angular 7, ensuring that the spinner is continually visible

While using ngx-loading to display a spinner during server response retrieval, I encountered an issue. The spinner works properly by appearing when the request is sent and disappearing once the server response is received. However, if I click on the area w ...

angularngx-loading

The directive's @Output will display information in the parent component, but it is unable to directly modify a value within

index.component.html <div draggable (drag)="handleDrag($event)">{{draggingValue}}</div> index.component.ts handleDrag(event) { console.log('handleDrag :', event); // works fine this.draggingValue = event; // not updating ...

angularangular-directive

Checking if the group of radio buttons has been selected using JQUERY

Need help with validating a group of radio buttons. If none are checked, display an error message in the span element to prompt users to select an option. The strange issue I am facing is that the validation code works only when placed below the radio butt ...

javascriptjqueryhtml

Add a unique shape to the CSS clip property

Recently, I've been delving into the clip property of CSS and its ability to apply a rectangle or square object. Despite my research efforts, I haven't come across a clear answer to my question. Can you actually use a customized shape with the c ...

csscustomizationcss-shapesmaskingclip

Add some hues to the icons

I am a beginner when it comes to CSS and jQuery. My goal is to color in an icon, similar to Instagram's heart icon which turns red when double-tapped. Currently, I am using Font Awesome for this purpose. However, I am struggling to fill the color as ...

javascriptjqueryhtmlcssfont-awesome

A div containing col-sm class with margin specified on one side

As a newcomer to web design, I've been searching for a solution to this issue with no luck. I am trying to include a fixed vertical navbar on the side of my webpage. To achieve this, I enclosed the entire content in #everything and applied a left mar ...

htmlcssbootstrap-4

What is the best way to target an anchor element that includes a particular word using jquery or css?

I attempted $('a[title="*"]').find('contains("PDF")').css({'background-color':'red'}); Unfortunately, this code is not working as expected. To clarify, I am searching for a specific word in the title. ...

jquerycss

What is the best way to incorporate "thread.sleep" in an Angular 7 app within a non-async method like ngOnInit()?

Despite the numerous questions and solutions available on Stack Overflow, none of them seem to work when called from a component's init function that is not asynchronous. Here's an example: private delay(ms: number) { return new Promise( ...

javascriptangular

Keyhole Markup Language (KML) - a specialized layer for mapping

Is there a way to create a KML layer for a polygon with specific coordinates in such a way that the area outside of the polygon is disabled from being clicked or utilized by drawing managers? [33.832681,-84.504041], [33.889129,-84.361905],[33.756788,-84. ...

google-mapsangularkml

Implementing color to text in React JS

Is it possible to change the color of text using inline styles within the HTML tag itself? If so, how can I achieve this? <div id="root"></div><br> <script src="https://unpkg.com/react@16/umd/react.development.js"></script>& ...

javascripthtmlreactjs

Where is the best position to place the navbar in responsive design and grid layouts?

I am creating a small blog website using metalsmith and the PureCSS framework. The layout consists of a simple three-row structure like this: <div class="pure-g"> <div class="pure-u-1"> Navbar </div> <div class="pure-u-1"> ...

htmlcsspure-css

When triggering my custom Exception in Angular 2, Angular automatically encapsulates it within viewWrappedDebugError

Developing a substantial Angular 2 application, I've crafted my own Exception to handle errors efficiently. However, it appears that Angular is trying to encapsulate my error within some viewWrappedDebugError. This is the structure of my custom Excep ...

angular

Utilizing Ionic to import and parse an Excel file for data processing

I need assistance in uploading an Excel file and reading it using Ionic-Angular. I tried the following code, but it only seems to work for browsers and not for the Ionic app on Android. Can someone please help me with this issue? I am trying to read the E ...

javascriptangularexceltypescriptionic-framework

Setting the default value for a useRef<HTMLInputElement> in ReactJs with Typescript

Is there a way to assign a number as the initial value on useRef<HTMLInputElement> without using useState<number>() since the field is a simple counter? Below is my TypeScript code: const MyComponent = () => { const productAmountRef = us ...

htmlreactjstypescriptreact-hooks

Adjusting the size and adding ellipsis to the <td> component within a table

How can I set a fixed width for td elements in a table and use text-overflow: ellipsis to truncate the text inside the cells? I have attempted various methods without success. Can someone provide guidance on how to achieve this? <table> <tr& ...

htmlcsshtml-table

Initiate monitoring for child component modifications

I'm looking to disable 'changeDetection' for the parent component while enabling it for the child component. Can you provide an example of how this can be achieved? The parent component contains static data, meaning change detection is not ...

javascriptangulartypescript

Is there a way to determine the color of an element when it is in a hover state?

I recently started using the Chosen plugin and noticed that the color for the :hover on the <li> elements is a bright blue. I want to change it to a bold red color instead. https://i.stack.imgur.com/mcdHY.png After inspecting it with the Chrome too ...

javascriptjqueryhtmlcssjquery-chosen