What is the best way to stretch Font Awesome icons horizontally within a message box and incorporate an image into a uniform circle design using Bootstrap?

I have encountered two issues that I need help with. Firstly, following my tutorial did not result in pictures that are as uniform as the design.

Here are the comparison pictures: the first one is from the tutorial and the second one is what I coded.

https://i.sstatic.net/t6WEE.jpg

https://i.sstatic.net/zIPOO.jpg

My second problem is that when I coded, the Font Awesome icon did not stretch as expected. Here are the comparison pictures: the third one is from the tutorial and the fourth one is what I got.

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

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

So, my questions are: How can I make the photos uniform circles as in the design? And how can I stretch the Font Awesome icon horizontally with the message box?

I am using Bootstrap 5 for coding.

Here is the link to my code:

https://github.com/nguyencuc2586/project2.3

Thank you for your help!

htmlcssbootstrap-4bootstrap-5

Answer №1

Take a look at the following code snippet, it may be helpful for you.

.img-box {
            width:  100px;
            height:  100px;
            display:  inline-block;
            vertical-align:  top;
        marg
        }
        .img-box img {
            width:  100%;
            height: 100%;
            object-fit: cover;
            border-radius:  50%;
        }
<!DOCTYPE html>
<html>
...
</html>

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

Creating multiple thumbnails and storing them in various folders using CodeIgniter

I am looking to organize my images into different folders - one for original pictures and another for thumbnails. However, when I try to upload an image to the thumb directory, it shows up as empty. https://i.stack.imgur.com/5Fybz.png Below is the code s ...

phphtmlcodeigniter

Utilizing a custom keyboard with Jquery for a recurring function

It seems like I might be missing something simple here, as I am following the code tutorial provided in the link below: The goal of this project is to create a popup keyboard for a touch screen. Although I have made some modifications for specific purpose ...

javascriptjqueryhtmlcss

What is the best way to align these two divs centrally within a container set to display as inline-block?

I can't seem to get these two floated left divs centered within a container that has a height set to auto and a display of inline-block. The container has a max-width of 1600px, but when the window is stretched wider than that, it stays aligned to the ...

htmlcss

Issue with the style of the inline menu is not functioning properly in IE11

My menu with inline block links is working perfectly in all browsers except for IE11. In Chrome, it looks like this: https://i.sstatic.net/78EcQ.png In IE11, it looks like this: https://i.sstatic.net/HbPBt.png Here is the CSS code snippet: .rlist-- ...

htmlcss

When you hover over the button, a picture will appear

This is an example code snippet from W3Schools. It showcases an animated button that reveals a small arrow next to the text when hovered over. The specific line of code responsible for this effect is .button span:after {content: '\00bb'. How ...

htmlcss

Steps to create a dynamic <div> that is only visible within a parent <div>

First of all, I want to express my gratitude for welcoming me into the group. I am seeking assistance with an inquiry regarding jQuery animation. The specific animation in question can be seen on the navigation menu items of this template from Template Mon ...

javascriptjqueryhtmlcssanimation

What is the method for embedding the creation date of a page within a paragraph on Wagtail?

Whenever a page is created in the admin panel of Wagtail, it automatically displays how much time has elapsed since its creation. https://i.stack.imgur.com/6InSV.png I am looking to include the timestamp of the page's creation within a paragraph in ...

pythonhtmlwagtail

Angular: monitoring changes in HTML content within a Component or Directive

I have a situation where I am retrieving HTML content from a REST endpoint using a directive and inserting it into a div element using [innerHTML]. Once this HTML content is rendered, I would like to manipulate it by calling a global function. My approach ...

javascripthtmlangulartypescript

scrolling through horizontal bootstrap thumbnails

Hey there, I'm currently working on making the bootstrap thumbnails fit into a Div that has a horizontal scroll. However, I've run into an issue where they are collapsing beneath it instead of being offset properly as shown in the image. Does any ...

htmlcsstwitter-bootstrap

How can the end event of a custom CSS animation be bound using jQuery or JavaScript?

We are currently managing multiple animations on the same object and need to execute different actions once each animation is complete. At present, we listen for the webkitAnimationEnd event and use a complex if/then statement to handle each animation sep ...

javascriptjquerycsswebkitmobile-safari

Engage in intricate animations on Blaze

Currently seeking an effective method for implementing animations within my app using Blaze. To provide further clarification, I have included a basic example below: <template name="global"> <h1>Hello everyone!</h1> {{> foo}} ...

cssmeteoriron-routermeteor-blazeanimate.css

Incorporating a closing screen into a game built with Canvas and jQuery

After following a tutorial on creating a snake game, I decided to work on enhancing it as a side project. Currently, the game has a start screen where players can begin the game by pressing "start." My goal is to implement an end screen that displays the ...

javascriptjqueryhtmlcanvas

The route seems to be downloading the page instead of properly rendering it for display

I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...

javascripthtmlexpressroutes

Aligning content within a div using Bootstrap 4

For a demonstration of this code, please visit the following Codepen link: codepen <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstr ...

htmlbootstrap-4

Attempting to alter the appearance of my validation control by implementing a custom style sheet theme

After naming a style sheet theme Basic and applying it to my web.config file, I created a Validator class in the css file. Utilizing the cssClass attribute with the Validator type, I successfully adjusted the font-weight property but struggled to change th ...

htmlcssasp.net

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Can you explain the contrast between onsubmit="submitForm();" and onsubmit="return submitForm();"?

Is it possible that the form below is causing double submissions? <form name="myForm" action="demo_form.asp" onsubmit="submitForm();" method="post"> function submitForm(){ document.myForm.submit(); } I've noticed a bug where sometimes two ...

javascripthtml

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

javascriptjqueryhtmlurlhashchange

The functionality of the localStorage HTML5 feature is experiencing issues within the WebView on Samsung Android devices

I am currently facing an issue with my HTML5 application which I am wrapping with a WebView. In order to store and retrieve user input values between pages, I have been utilizing the localStorage feature in HTML5. Interestingly, this feature functions per ...

androidhtmlwebviewlocal-storagesamsung-mobile

Exploring the art of manipulating HTML code using JavaScript

I am looking to implement a specific change using JavaScript: <input id="innn" value="" /> to: <input id="innn" value="SOME_VALUE" /> I attempted the following methods: document.getElementById("innn").setAttribute("value", "189"); and als ...

javascriptphphtml