Ways to include text beneath an image within a column using Bootstrap HTML code

Currently I am working on creating a box using Bootstrap, see the code below:

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .addonscard {
    width: 100%;
    height: 181px;
    padding: 2%;
    border: 1px solid #efefef;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px;
  }
</style>


<section class="addons">

  <div class="container">

    <div class="row">

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days from the event date.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

It seems like the text is overflowing the box and I would like it to continue below the image. I have attached an example image for reference: https://i.sstatic.net/DJ2i9.png

Since the image and text are in different columns, I'm having trouble achieving this layout. I'm new to Bootstrap, so if anyone could provide guidance on how to accomplish this, I would greatly appreciate it. Thank you in advance.

htmlcssbootstrap-4

Answer №1

If you have specified a height in .addonscard, you must also include the overflow property. I have included the overflow property in my answer. I hope this information is helpful.

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<style>
  .addonscard {
    width: 100%;
    height: auto;
    padding: 2%;
    border: 1px solid #efefef;
    overflow:auto;
  }
  
  .addonsimage {
    width: 100%;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .add-on-add-unit {
    font-size: 14px;
    line-height: 20px;
    padding: 2px 12px 2px 10px;
    border-radius: 10px;
    display: inline-block;
  }
  
  .add-on-add-unit {
    color: #30ac15;
    border: 1px solid #30ac15;
  }
  
  .addonsdesc {
    font-size: 13px;
  }
</style>


<section class="addons">

  <div class="container">

    <div class="row">

      <div class="col-md-5">
        <div class="addonscard">
          <div class="row">
            <div class="col-md-4">
              <img class="addonsimage" src="test1.jpg" />
            </div>
            <div class="col-md-8">
              <h4>This is Heading</h4>
              <p>Price</p>
              <a href="" class="add-on-add-unit">+ Add</a>
              <p class="addonsdesc">Standard photography at best value to turn make lifetime memories from your party. Photographer will be available for maximum 3 hours. 150 - 200 soft copies will be delivered through CD within 10 working days from the event date.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>

Answer №2

Kindly give this a shot - 

<section class="addons">
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <div class="addonscard">
            <div class="row">
              <div class="col-md-12">
                <img class="addonsimage" src="img/Android-Pie-wallpapers-Google-Now-Wallpaper-2.png" />
                <h4>Heading Here</h4>
                <p>Price Info</p>
                <a href="" class="add-on-add-unit">+ Include</a>
                <p class="addonsdesc">Top-notch photography services at an affordable rate to capture unforgettable moments from your event. Photographer will be present for up to 3 hours. Expect to receive 150 - 200 digital copies via CD within 10 business days post-event.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

.addonscard {
      width: 100%;
      height: 181px;
      padding: 2%;
      border: 1px solid #efefef;
    }

    .addonsimage {
      width: 50%;
      float: left;
      margin-right: 20px;
    }

    .add-on-add-unit {
      color: #30ac15;
      border: 1px solid #30ac15;
    }

    .add-on-add-unit {
      font-size: 14px;
      line-height: 20px;
      padding: 2px 12px 2px 10px;
      border-radius: 10px;
      display: inline-block;
    }

    .add-on-add-unit {
      color: #30ac15;
      border: 1px solid #30ac15;
    }

    .addonsdesc {
      font-size: 13px;
    }

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

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

I have an API that sends HTML data as a response. The task at hand is to add accordion icons to the items in the list and enable list toggling using HTML, CSS, JavaScript, React, and MaterialUI. Unfortunately, I am limited in my options and cannot use JQ ...

javascripthtmlcssreactjsmaterial-ui

What impact does Bootstrap .ratio have in making the img show up over the offcanvas menu?

Is there a way to prevent a ratioed image from appearing above the offcanvas menu? When using Bootstrap 5 and specifying a 16x9 ratio for the image... <div class="ratio ratio-16x9 my-3"> <img width="768" height=&q ...

csstwitter-bootstrapbootstrap-5off-canvas-menu

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

CSS table row border displaying irregularly in Chrome and Internet Explorer

I recently created a basic table with bottom row borders. Surprisingly, the borders display perfectly in Firefox but only partially in Chrome and IE 10: <div style="display:table; border-collapse: collapse; width: 100%"> <div style="display:table ...

htmlcssbordercss-tables

Track your status with jQuery technology

I have a link: <a href="/test/number/3/phone/0">33df</a> Is there a way to determine if the words 'number' and 'phone' are present in this link? I am looking for a function similar to: check('number', ' ...

javascriptjqueryhtml

Combining Django and chartjs to create stacked multiple charts

Hey there! I'm working on a Django application and using Chart.js to create bar charts. I encountered an issue where, after generating a new chart with a button click, the old one still lingers behind when hovering over the new chart. I have a suspici ...

javascripthtmldjango-templateschart.js

Font size transition on pseudo elements is not functioning properly in Internet Explorer when using the "em" unit

When I hover over, the font awesome icon and text on this transition increase in size. All browsers work well with this effect except for IE 11. This example demonstrates the same transition using px (class test1) and em (class test2). While using px wor ...

cssinternet-explorerinternet-explorer-11

Troubleshooting: Issues with React Material-UI breakpoints not functioning

Trying to create a responsive navbar using Material-UI. The goal is to hide the IconButton between 960px and 1920px, and display it from 0px to 960px. However, it seems to work only below 960px. Here's a snippet of the code for IconButton and ul: ...

cssreactjsmaterial-ui

What is the process for assigning various hyperlinks to database array outputs?

https://i.sstatic.net/AuYe7.jpg I've got an array of usernames pulled from a database. By using a for each loop, I'm able to display these usernames along with additional information like paragraphs written by the users and the date those paragr ...

phphtml

In Form view in Odoo, the field value appears on the following line when editing

When attempting to edit a value in the form view, I am experiencing an issue where the field's value is being pushed onto the next line. <div class="row"> <label string="Website" for="field_id" class="col- ...

htmlcssbootstrap-4odoo

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

Selecting multiple items in jQuery based on different attributes is a useful feature that

I am looking to choose multiple items based on their data attribute. Each item has a unique data-id. <div class="foo" data-id="1"></div> <div class="foo" data-id="2"></div> <div class=" ...

htmljquery

JQuery Submission with Multiple Forms

Hey everyone! I have a jQuery form with multiple fieldsets that switch between each other using jQuery. Eventually, it leads to a submit button. Can someone assist me by editing my jfiddle or providing code on how I can submit this data using JavaScript, j ...

javascriptjqueryhtmlajax

Tips for transforming JSON data from a specified URL, which requires authorization, into an HTML table or list using PHP

I am attempting to retrieve JSON data from this source: They have provided a 'how to' guide here: I have successfully connected with Authorization and received the raw JSON, but I am unable to format it into a table. This is the code I have wr ...

phphtmljsonxml

Implement a scrolling feature to the tooltip when using "data-toggle"

I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the to ...

htmlcssasp.net-mvcbootstrap-4tooltip

Removing dropdown lists from input forms can be achieved without using jQuery by utilizing vanilla JavaScript

Looking to build a custom HTML/JavaScript terminal or shell. Interested in utilizing an input box and form to interact with JavaScript functions/commands. Unsure of how to eliminate the drop-down menu that appears after previous inputs. Pictured terminal: ...

javascriptjqueryhtml

Use CSS specifically for codeigniter viewpage

I am unsure if it is possible, but I would like to load CSS and JavaScript within a view page instead of on include.php. Currently, the CSS file is loading on include.php and it is working correctly. What I want to achieve now is to load it directly inside ...

javascriptphphtmlcsscodeigniter

What is the best way to incorporate a jQuery script to make an engaging slideshow on my website?

I've been trying to develop a slideshow similar to the one showcased on this website. First of all: I am using Kompozer. My website is not yet live as I am still in the process of putting it together on my computer. To give you an idea, here is the d ...

jqueryhtmlcss

I successfully corrected the selectable options list in HTML/CSS and am now working on linking it to a Django char field. I'm currently facing some difficulties in figuring out

Below is a Django form field I have defined: source_currency = forms.CharField(max_length=5) Here is an example of Select/Option HTML: <select name="fancySelect" for="{{ form.source_currency.id_for_label }}" class="makeMeFancy" id="drop1"> ...

pythonhtmldjango