Tips for incorporating an icon into a bootstrap card along with a title and text on the same line

Struggling to include an icon in a bootstrap card? Want the icon, title, and text all in the same row? I attempted using float left on the card icon, but it didn't have the desired effect. Any suggestions on how to achieve this successfully would be greatly appreciated! Thank you :)

.card-icon {
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  float: left;
  margin-right: 15px;
  text-align: center;
}

.card-icon i {
  font-size: 48px;
}

<div class="card m-b-30 card-body">
  <div class="card-icon"><i class="mdi mdi-database"></i></div>
  <h3 class="card-title font-24">Available Credits: 2</h3>
  <p class="card-text">2 Email Verification Credits Left</p>
  <div class="d-flex">
    <a href="#" class="btn btn-primary waves-effect waves-light">Buy More Credits</a>
    <a href="#" class="btn btn-light waves-effect waves-light ml-3">Track Your Credits</a>
  </div>
</div>
htmlcssbootstrap-4

Answer №1

Include your h3 and p tags within the div container. If this method does not yield results, adjust the widths of the elements to percentages relative to the page size, ensuring they add up to 100% or less.

Update:

In your CSS file, append the following code:

display: inline-block;

This modification should be applied to all mentioned elements.

Answer №2

One effective solution to tackle this issue is by utilizing flexbox.

Bootstrap 4 offers a handy class called d-flex for this purpose. By default, the flex-direction is set to row, ensuring that elements like i, h3, and p are displayed in the same row. To ensure that these elements fill the available width, simply include the flex-fill class in each element. Additionally, incorporating the align-items-center class attempts to vertically center the elements (keep in mind that margins can impact this alignment).


    <div class="card m-b-30 card-body">
        <div class="d-flex align-items-center">
            <div class="card-icon flex-fill"><i class="mdi mdi-database">a</i></div>
            <h3 class="card-title font-24 flex-fill">Available Credits: 2</h3>
            <p class="card-text flex-fill">2 Email Verification Credits Left</p>
        </div>
        <div class="d-flex">
          <a href="#" class="btn btn-primary waves-effect waves-light">Buy More Credits</a>
          <a href="#" class="btn btn-light waves-effect waves-light ml-3">Track Your Credits</a>
        </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

Having trouble with the Javascript denial of submit functionality?

I'm dealing with an issue in my code where form submission is not being denied even when the input validation function returns false. I can't figure out what's causing this problem. <script> function validateName(x){ // Validati ...

javascriptphphtml

Tips for connecting a CSS file to a pdf.html file in Django and resolving a FileNotFoundError error

Has anyone encountered an issue where the PDF.html file is not linking to any CSS file? I have tried the following: Template PDF.HTML {% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" ...

pythonhtmlcssdjango

CKEditor's height automatically increases as the user types

I am using a ckEditor and looking for a way to make its height automatically grow as I type. https://i.stack.imgur.com/m7eyi.png <textarea name="description" id="description"> </textarea> <script> CKEDITOR.replace( 'description ...

javascriptcssckeditorckeditor4.x

HTML5 Dragend event failed to trigger in Firefox

While working on my project, I encountered an issue where the 'dragend' event is not fired in Firefox 22.0 on Ubuntu but works perfectly fine in Chrome. I have written a logic to make changes on drag start and revert them if drop fails, triggered ...

javascriptjqueryhtmldrag-and-drop

What is the best way to retrieve text from a span within an input field when it is highlighted?

Is there a way to extract the text from a span that comes before a text input, and when that input is focused, retrieve the span associated with it? Consider this example structure: <div> <label for="id">...</label> <input type="text" ...

jquerytextinputthishtml

Choose only the initial element, regardless of its category

Is there a way to apply a specific style exclusively to the very first element within a container, only if it is an h1, h2, or h3? However, if there are multiple headings of different levels on the same page, only the initial one should receive the designa ...

csscss-selectors

Angular footer is missing icons

Recently, I started using Angular and installed Bootstrap 4.6.0 on Angular 12. Everything was working fine, except for one little issue - the icons in the footer section were not showing up as expected. It seemed like they were not part of Bootstrap or som ...

angularbootstrap-4

Why is this strange red dot character 🔴 appearing in the URL in FireFox?

While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...

htmlurlfirefoxcharacter-encoding

HTML Signature - Incorporating a website into your email correspondence

I'm attempting to create an email signature using HTML that pulls the code from another website. Let's say I have the HTML hosted at example.com/code.html, and the contents of code.html are as follows: <html> <body> Jane Smith <a ...

htmlembed

Show symbols exclusively on masked pictures

Our json files contain two types of images for processing... 1. Mask images These images have a transparent background, as shown below: https://i.sstatic.net/I7R5j.png 2. Background images : Any normal images I am currently displaying icons on all ...

javascriptjqueryjsonhtmlif-statement

Modifying the onclick function of an HTML select element - easy steps!

I have customized the click event on my select tag to trigger a specific action. However, when I click on the select tag, the default option list is also displayed. I want to bypass this default behavior and only execute my custom action when the select ta ...

javascriptjqueryhtmlhtml-select

Ajax request unable to load Image Slider

I'm currently implementing an Image Slider from this source For the site structure, I've set up an index.html file to display all the pages, allowing navigation by changing the content within <div id="isi">. Here's a snippet of the in ...

javascripthtmlcssajaxslider

Ensuring that columns stay at a fixed width without wrapping in Bootstrap 4

I'm currently working on a layout where I want the columns to maintain a constant width when resizing the browser, without wrapping. Instead, I'd like a horizontal scroll bar to appear once it reaches the minimum width. Here's my code: < ...

cssbootstrap-4twitter-bootstrap-4

Tips for arranging elements in a customized manner using Bootstrap

Is it possible to reorder columns between desktop and mobile in Bootstrap 5 like the example shown in this image? https://i.sstatic.net/I74PF.jpg I have explored using the order classes and experimented with position: absolute, but I haven't been ab ...

csstwitter-bootstrapbootstrap-5

How can I customize the appearance of the file input button in Angular Material?

Despite browsing numerous similar questions, I have yet to find a solution to my issue. My setup includes Angular 11, Angular Material 8, and a file input structured like this: <div class="form-group"> <input #myInput type="fil ...

cssangularbootstrap-4angular-material

Enhance the elastic layout to ensure full compatibility with Internet Explorer

My elastic layout functions perfectly in Chrome and other major browsers, except for IE which seems to be ignoring the @media query. http://jsfiddle.net/U2W72/17/embedded/result/ * {margin: 0px; padding 0px'} .thumb { float: left; width:16. ...

htmlcssinternet-explorercross-browser

Tips for changing the text in a .txt file that has been accessed through a $.get request

Is there a way to read and open a file, but update a specific value within it? For example, if my data.txt looks like: [ {"slot": "1", "name": "Bob"}, {"slot": "2", "name": "John"} ] and I want to update it with a query like: "UPDATE data.txt SET na ...

javascriptjqueryajaxhtmlphonejs

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

javascriptjqueryhtmlcss

Versatile Border Curvature

I am struggling with applying border radius to anchor tags in a way that they appear inside a circular shape. I want the shape to be flexible based on the width of the text within the tag. Any suggestions or guidance would be greatly appreciated. Here is a ...

htmlcss

Input field with ruled lines beneath each line of text

Can you assist in creating a textarea that displays lines under each row of text similar to the example shown in the image below? ...

javascriptjqueryhtmlcss