Placing an icon directly beside two paragraphs, ensuring it is vertically centered and positioned to the right of the text

I am looking to add an icon next to two paragraphs that will be positioned exactly in the center (vertically) on the left side of the paragraphs. Here is the desired outcome:

https://i.sstatic.net/RmjOR.png

Currently, here is what I have:

https://i.sstatic.net/HCLgK.png

This is the code snippet I am working with:

<div class="row">
  <div class="col-sm-12"> <span>
      Promo Code
    </span>
    <icon type="Success filled"></icon>
    <p class="text-success">PlayerRegistrationPromotion Applied</p>
    <p>
      $ in credits available</p>
  </div>
</div>

Note: The text and sentences used in the example are just placeholder data. The main focus is on the styling. How can I achieve the desired layout effectively?

htmlcssbootstrap-4iconsrow

Answer №1

Are you looking for this information?

https://codepen.io/polinq/pen/abzBYoy

Just to clarify, using display: flex on the inner element will arrange the elements into two columns. By default, flex-direction is set to row, so the elements will be in a single row. I have also included another div (inner-two) to separate the text 'PlayerRegistrationPromotion Applied' from the text about the credit. If you remove it, the texts will be placed next to each other instead of in separate rows.

I hope this explanation clears things up!

    <div class="row">
  <div class="col-sm-12"> <span>
      Promo Code
    </span>
    <div class="inner">

        <icon type="Success filled"><img src="http://placekitten.com/60/90" alt=""></icon> 
      <div class="inner-2">
    <p class="text-success">PlayerRegistrationPromotion Applied</p>
    <p>
      $ in credits available</p>
      </div>
    </div>
  </div>
</div>

.inner {
  display: flex;

}

Answer №2

Seems like Bootstrap is being utilized here. One suggestion could be to have the 'Promo Code' text on a single line spanning the entire width, followed by the checkmark icon in a few columns and the additional text in the remaining columns on the next row.

You could start with something like this:

<div class="row">
  <div class="col-12">Promo Code</div>
  <div class="col-3 text-center"><icon type="Success filled"></icon></div>
  <div class="col-9"><p class="text-success">PlayerRegistrationPromotion Applied</p><p>$ in credits available</p></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

Maximizing the recursive capability of DjangoTemplates

I have a template called home.html which serves as the view for an app in Django. Within this HTML file, I have implemented some templating to facilitate the dynamic generation of content. For instance, I utilize {% load static %} followed by href="{% stat ...

htmldjangotemplating

Retrieving the selected value from a Bootstrap dropdown using JavaScript when there are multiple dropdowns present

I have created multiple rows in javascript that are being rendered to the DOM from a Firestore collection. Each row contains a Bootstrap dropdown with the same select options (".a" elements). The id attribute of each row div is dynamically set based on the ...

javascriptbootstrap-4google-cloud-firestoredrop-down-menu

The problem of duplicate ids: Once an id is used, it cannot be

Currently, I'm focusing on a specific script : http://www.andwecode.com/playground-demo/pop-up-login-signup-box-jquery/# I've made some adjustments to the Gmail and Facebook boxes within this script. When clicking on them, I want them to displa ...

htmlcss

Adjusting the size of the jQuery window in Google Chrome

I'm encountering an issue with resizing a menu. The code I have works fine on all browsers except Chrome. Describing this problem in words is tough, so I'll provide some screenshots to better illustrate the issue. This is how my menu appears in ...

jquerycssgoogle-chromecross-browsercss-float

Is there a way to show a loading icon during the image change process without using jQuery?

How can I add a loading icon to an image change event without using jQuery? I'm new to the coding world and Stack Overflow community, so please bear with me. I've been searching for a solution to my specific situation but haven't been able ...

javascripthtmlcssimageloading

Can Bootstrap be configured to use a single resolution exclusively?

Uncertain about the feasibility, I am initiating this inquiry. Can Bootstrap be utilized solely with one resolution (Medium desktop)? This question arises from the fact that the design I possess is catered towards Medium desktop (970px wide). My intentio ...

csstwitter-bootstrap

How come user CSS in Stylish takes precedence over the author's CSS?

Here's a sample page: <!DOCTYPE html> <html> <head> <style type="text/css"> body { background: black; } </style> </head> <body> </bod ...

css

What is the best way to include the existing query string value in the hyperlinks on my page?

My main coding objective is to simultaneously search multiple websites. To accomplish this, I want to create a query string containing the search terms (primarily for analytics purposes) using a form. By utilizing JavaScript, I am aiming to include the s ...

javascriptjqueryhtmlarraysquery-string

Improving the functionality of multiple range slider inputs in JavaScript codeLet me

Is it possible to have multiple range sliders on the same page? Currently, all inputs only affect the first output on the page. Check out an example here: http://codepen.io/andreruffert/pen/jEOOYN $(function() { var output = document.querySelectorAl ...

javascripthtml

employing rowspan functionality within a JavaScript application

How can I achieve a table layout where the first two columns are fixed for only one row and the remaining rows are repeated 7 times? Additionally, is there a way to make the bottom border of the last row thicker? Check out the expected table for reference. ...

javascripthtmlcss

Recreating dropdown menus using jQuery Clone

Hey there, I'm facing a situation with a dropdown list. When I choose "cat1" option, it should display sub cat 1 options. However, if I add another category, it should only show cat1 options without the sub cat options. The issue is that both cat 1 a ...

javascriptjqueryhtmlajax

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

I've been working on creating a JavaScript game and am currently tackling the challenge of implementing gravity. One crucial aspect I need to address is creating an infinite loop without causing the browser to crash. Is there a way for me to include a ...

javascripthtmlcssinfinite-loopgame-development

Aligning a block heading in the middle of the page

I developed a basic flex-based table. section { display: flex; flex-direction: row; align-items: stretch; width: 100%; margin: 0; background-color: green; } h2, ul { width: 50%; padding-left: 1.5em; padding-right: 1.5em; } h2 { tex ...

htmlcssflexbox

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss

Aligning Text Vertically with an Image in ul/li List Items

Apologies if this question has already been asked, but I've checked several similar inquiries in an attempt to merge the solution without much luck. I currently have a bootstrap row with two col-md-6's. The first column contains an image, while t ...

htmlcsstwitter-bootstrapvertical-alignment

Displaying information from an array using AngularJS

I'm struggling to display data from an array and I could use some help. Here's a snippet from my service.js file: this.fetchData = function() { var myArray = $resource('url', {method: 'get', isArray: true}); myArray ...

javascriptjsonhtmlangularjs

Can someone help clear up this confusion with CSS?

Why is image 6.png selected, when all the images are direct descendants of the div shape? Thank you for your assistance, it's greatly appreciated. As far as I know, it should select all the divs because they are all direct descendants of the div #shap ...

javascripthtmlcss

Create a unique SVG path by eliminating any overlapping shapes directly within the code

I have an SVG image representing the Switzerland flag, with a cross made of two overlapping rectangle paths. I need to make it look more like the real flag by removing two vertical lines in the center of the cross. Is there a way to modify the code to eli ...

csssvgvector-graphics

Personalized element IDs and unique CSS styles

After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...

css

Looking for a simple method to display a popover using conditional if/else statements?

On my website, I am utilizing JavaScript to determine the user's Facebook status. This includes checking if the user is already logged in and has allowed our app, if they are logged in but haven't authorized our application, or if they are not lo ...

javascripthtmlfacebookpopup