Icons in small circles surrounding text in HTML

I am trying to add a small icon or image next to my HTML code on a webpage, but I can't seem to get it to display properly. Currently, the image is showing above the code instead of beside it. How can I adjust my code to achieve this? Below is the code snippet I am working with:

 div class="row">
  <div class="col-sm-4">
    <div class="row">
      <div class="col-12">
    <img class="img-circle" src="download.jpg">
    <h1> A heading </h1>
    </div>
    </div>
    <hr> <br>
    <p> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p>
  </div>

Here is a wireframe representation of the code structure: View Wireframe

Unfortunately, the output is not displaying as expected. To see the actual result, you can check the link below: Output Image

htmlcsswebfrontendbootstrap-4

Answer №1

If you want to properly format your images and headlines in columns, you should follow this structure:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row mt-2">
        <div class="col-md-4">
            <div class="row">
                <div class="col-md-3">
                    <img class="rounded-circle" src="https://placehold.it/60">
                </div>
                <div class="col-md-9 align-self-center">
                    <h1 class="h3 pl-2">A heading </h1>
                </div>
            </div>
            <hr> <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        </div>
    </div>
</div>

Furthermore, remember that the correct class for rounded images is rounded-circle.

The align-self-center class ensures the headline is aligned vertically in the center. Additionally, the pl-2 class adds padding to the left.

For a better layout where images and headlines never overlap, you can consider the following structure:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row mt-2">
        <div class="col-md-4">
            <div class="row">
                <div class="col-2 col-md-3">
                    <img class="rounded-circle" src="https://placehold.it/60">
                </div>
                <div class="col-10 col-md-9 align-self-center">
                    <h1 class="h3 pl-4 pl-md-2">A heading </h1>
                </div>
            </div>
            <hr> <br>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
        </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

Iterating through form elements for validation using jQuery

Is there any way to accomplish this using jQuery? This is the initial setup: <input type='checkbox' class='sk1' /> <input type='text' class='skill1' /> <input type='checkbox' class=' ...

javascriptjqueryhtmlinput

Accessing HTML elements that are created dynamically in AngularJS

I am facing an issue where I cannot access a function within a newly created DOM element. Despite my best efforts, I can't seem to figure out what is causing this problem. $scope.createCustomHTMLContent = function(img, evtTime, cmname, evt, cust, ser ...

javascriptjqueryhtmlangularjsgoogle-visualization

What is the best way to eliminate excess white space on the right side in WordPress for a mobile perspective?

Is there a quick way to identify which element has shifted beyond the border? It seems like there is excess margin. How can I pinpoint the issue? The link to the broken page on mobile is I applied this style * {border: 2px solid red;} and no elements shif ...

javascriptjqueryhtmlcss

Is it possible to use a JavaScript string as a selector in jQuery?

So, my issue is with the following JavaScript code snippet: for ( i=0; i < parseInt(ids); i++){ var vst = '#'+String(img_arr[i]); var dst = '#'+String(div_arr[i]); } I'm wondering how I can proceed in jQuery to handle ...

javascriptjquerystringvariableshtml

Is it possible to extract user-defined keywords from the URL?

Is it possible to implement dynamic functionality like this using PHP on my website (www.mywebsite.com)? If a user types www.mywebsite.com/banana into the URL bar, can my website take the keyword "banana" as input and search for it in a database table? ...

htmlformsurl

How can I extract echoed information from PHP after submitting form data through jQuery Ajax?

I am looking to transfer a file from an input form to a php script using ajax and handle the response echoed by my php script. Here is my HTML form: <form id="fileUploadForm" method="POST" enctype="multipart/form-data"> <input name="fileToU ...

javascriptphpjqueryhtmlajax

``In JavaScript, the ternary conditional operator is a useful

I am looking to implement the following logic using a JavaScript ternary operation. Do you think it's feasible? condition1 ? console.log("condition1 pass") : condition2 ? console.log("condition2 pass") : console.log("It is different"); ...

javascriptjqueryhtml

Ways to utilize jquery script within a react component

<script> $(document).ready(function() { var source; var destination; var fn = function(event, ui) { toDrop = $(ui.draggable).clone(); if ($("#droppable").find("li[uniqueIdentity=" ...

jqueryhtmlreactjsdrag-and-dropdraggable

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Looking to create a dynamic website with interactive features like adding and removing active links upon clicking, and smooth transitioning between sections using JavaScript. Feel free to skip over the SVG code. HTML source code <div class="s ...

javascripthtmlbootstrap-5sidebar

What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text. Here's a snippet of my HTML code: ...

htmlcsssvg

Hide jQuery dropdown when mouse moves away

I am working on designing a navigation bar with dropdown functionality. Is there a way to hide the dropdown menu when the mouse pointer leaves both the navbar menu and the dropdown itself? I have tried using hover, mouseenter, and mouseleave but due to my ...

javascriptjqueryhtmlcss

The <transition> element is not being recognized by VSCode

It seems like my VSCode is highlighting the transition element in red, indicating that it may not be recognizing this element. I'm a bit perplexed by what's happening here. Moreover, the code isn't functioning as expected because there is no ...

javascripthtmlvue.jstransition

The effect of iPad screen orientation on CSS styling

Exploring orientation testing using CSS for iPad. Below is the code snippet from the CSS file: @media only screen and (device-width:768px) and(orientation:portrait) { body { background: green; } } @media only screen and (device-width:768px) and(orient ...

htmlcssipadorientation

Unusual problem arises with styling and element measurement (scrollWidth / scrollWidth) in Gatsby framework

Currently, I am working on a component that splits lines based on the parent container's width without overflowing. Despite successfully implementing this in a sandbox or pure react application (even with custom fonts), I encountered issues when using ...

javascriptcssreactjsgatsby

Link with javascript onClick attribute

Is there a way to combine a JavaScript "onClick" event with an HTML "a href" link? I would like for the first step to be triggered upon clicking the link using "onClick", and if that is successful, the user should then be redirected to another page using t ...

javascripthtmlonclickhyperlinkajax-request

The process of running npx create-react-app with a specific name suddenly halts at a particular stage

Throughout my experience, I have never encountered this particular issue with the reliable old create-react-app However, on this occasion, I decided to use npx create-react-app to initiate a new react app. Below is a screenshot depicting the progress o ...

javascripthtmlcssreactjstypescript

Alter the class following modifications to the list

https://i.stack.imgur.com/QZob0.pngIn my dual list, the data is displayed in a ul li format fetched from a JSON file. Users can move items between the two lists. However, I am facing an issue where I want to apply a property that only displays content with ...

javascriptjqueryhtmlcssajax

Differences Between Mobile and Desktop Browser Media Queries

As I work on creating a responsive website, I have come across various examples of sites that adapt well to both desktop and mobile browsers. Currently, my stylesheet setup includes different media queries for various screen sizes. However, I've notic ...

cssresponsive-designmedia-queries

Having trouble finding the element for an image of a body part using xpath

When using driver.findElement(By.xpath(".//*[@id='bodyPartContainer']/div[1]")).click(); to select a part of the human body image, I'm encountering the following exception in webdriver: org.openqa.selenium.NoSuchElementException: no such ...

jqueryhtmlcssseleniumxpath

Is it possible to implement smooth scrolling in HTML without using anchor animation?

Is it feasible to implement a more seamless scrolling experience for a website? I'm referring to the smooth scrolling effect seen in MS Word 2013, but I haven't come across any other instances of this. I've heard that AJAX can make such th ...

javascriptjqueryhtmlcssajax