Steps for making a grid within a bootstrap 3 modal

I am new to HTML and CSS

I'm working on creating a modal content similar to this: https://ibb.co/RvrhmRs

Most of the work is done, but my modal currently looks like this: https://ibb.co/1zG0y2t

I just need help arranging an icon next to the text.

I've tried different methods like positioning and using CSS, but haven't achieved the desired result.

Can someone provide me with ideas for the HTML structure?

Your assistance would be greatly appreciated. Thank you

Answer №1

Utilizing the flex property in a strategic manner is crucial for optimizing layout design.

.text-wrapper { 
  display: flex;
  }
<div class="text-wrapper">
    <div class="text-wrapper-text">
        <div>Categories</div>
        <span>of products and services</span>
    </div>
    <div class="text-wrapper-text">
        IMG
    </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

PHP implementation of a webpage supporting multiple languages

I encountered an issue while creating a multi-lingual page successfully. I utilized CssFlipper to generate the RTL Bootstrap file and everything was functioning perfectly, except for the fact that when I switch the language to Arabic, the slider on the pag ...

How can I create multiple vertical lines in an SVG format?

How can I achieve an effect similar to this https://i.sstatic.net/ulZFR.png? I have attempted using strokeDashoffset and strokeDasharray, but I am still unable to achieve the desired result. I know that I can draw multiple lines, but I need a script that ...

Ways to verify the application of CSS hyphens using Chrome's developer tools

I cannot seem to get automatic hyphens to work via CSS. I have applied the following CSS: body { -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } Despite adding this CSS, my text is not being hyph ...

What is the method for automatically starting another .mp4 video once the first one finishes playing?

I am currently trying to replicate the functionality of a television for a project. The idea is to play a .mp4 file, and once it ends, automatically select and play another .mp4 file. It's like mimicking the TV experience where one episode finishes a ...

What is the best way to eliminate the left padding on a TimelineItem component?

When using the Timeline component to display information, there are three columns: TimelinItem, TimelineSeparator, and TimelineContent. I tried setting the padding of TimelineItem to 0 but it didn't work. The <Trace/> component is a sub-compone ...

How can I access multiple icons using jQuery?

Below is the JavaScript code I am using: $(document).ready(function() { $.getJSON("Stations.php", function(jsonData){ $.each(jsonData, function(key,value) { $('#selectStation') .append($("<option></option>") ...

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

Having trouble transmitting parameters through ajax

I have been attempting to use ajax to send variables to a php page and then display them in a div, but unfortunately, it's not functioning as expected. Below is the HTML code: <div id="center"> <form> ...

Turn off the feature that highlights links

Hi there! I'm curious to know if it's feasible to remove the highlighting effect when clicking on a link. I'd like the link to function more like an image, without the appearance of a highlighting box upon clicking. ...

Issues with implementing a Bootstrap dropdown list in a Django HTML template

I'm having trouble implementing Bootstrap in my Django project's shared HTML file. The dropdown list isn't functioning properly despite trying various approaches, including using CDN and local Bootstrap files. When I click on the dropdown li ...

Exploring the dynamic world of Angular2 animations paired with the

In my layout, I have a row with three columns and two buttons to toggle the visibility of the side panels: col-md-3 col-md-7 col-md-2 ------------------------------------ | | | | | left | middle panel | | ...

The PHP code fails to run and instead displays as raw PHP code on the webpage

As someone new to web development, I am diving into the world of PHP for the first time. So please excuse my ignorance as I navigate through this process. The task at hand involves creating a website with an HTML form that sends emails. After doing some r ...

Using SVG files as properties in React from a data.js file

I have a website where I store my content in a data.js file and pass it to my components using props. Everything is working correctly, except for my .svg files. When I try to display them, they do not appear. However, if I change the extension of the image ...

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

After successfully converting my data to text/csv, I can easily download the file in Chrome. However, when attempting to do so in Safari on an iPad or Mac, it opens a tab with the name "unknown" or "Untitled". The code snippet I am using for this is as fol ...

Tips for overlaying text onto a canvas background image

I'm curious about how to overlay text on top of an image that is within a canvas element. The image is a crucial part of my game (Breakout), so it must remain in the canvas. I've tried adding text, but it always ends up behind the image, which is ...

The redirection to the webpage is not occurring as expected

I've been attempting to redirect another webpage from the homepage in my node server. However, the redirect isn't working as intended to link to idea.html, where the relevant HTML file is located. Can anyone assist me in identifying any errors in ...

Exploring the functionality of trading-vue library in a simple setup using vanilla HTML and Vue CDN

<html> <head> <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a0c0f1f3a48544c544b48">[email protected]</a>/dist/vue.js"></script> ...

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

How can I synchronize two webkit-animations at the same speed but with one covering a greater distance?

[Update: The solution involved creating two containers, with the second animation container configured to have left: 100%.] I designed a simple animation that moves a large gif image across the page horizontally, where the width of the gif is 1536px. Sin ...