Problem with spacing in a Bootstrap 5 column of size medium-5

I'm currently working on a template for my website and facing an issue with removing the margin displayed on the right side of my div using flex. I've tried setting the margin to 0 on one of the columns and also experimented with changing the column sizes (md-4 and 3), but the problem persists.

Does anyone have any suggestions on how I can make the white div stop at the end of the text?

Here's a snippet of my code:

<div class="container-fluid block_product" style="background:#fff;width: 50%;margin-left: 60px; /* Override Bootstrap's default margin */padding: 0px; /* Override Bootstrap's default padding */">
 <div class="row" style="margin-right: 0 !important; margin-left: 0 !important;">
    <div class="col-md-4 services-products" style="padding: 0;">
       <div class="col d-flex align-items-center justify-content-center">
          <div><img class="lazyload " src="//bewens.myshopify.com/cdn/shop/files/anissa_kermiche_reine_14_karat_gold_diamond_and_pearl_earring_1_large.jpg?v=1713833565"></div>
           </div>
               </div>
                 <div class="col-md-5">
                   <div class="text-left">
                     <div class="home-section-1-product-col-2">
                          <p class="home-section-1-product-title-1">title one</p>
                               <p class="home-section-1-product-title-2">
                                   </p><p>Our devoted clients have noticed </p>
                                    </div>
                                    <div class="home-section-1-product-price">
                                        <p class="home-section-1-product-price-h2">
                                            99.00 IN
                                        </p>
                                    </div>
                                    <p class="section-1-product-strike text-center" style="margin-bottom: 0 !important;">
                                    ANKUBA-TU <strike> 130.00 IN
                                    </strike></p> 
                                    <div class="d-grid gap-2"><button class="py-md-3-custom btn btn-primary py-md-3 px-md-5 me-3 " style="margin-bottom: 10px !important;">Découvrez </button></div>
                                </div>
                            </div>
                            
                        </div>
                    </div>

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

htmlcssbootstrap-5

Answer №1

If you're looking to explore something new, give this a shot:

<div class="container-fluid block_product" style="background:#fff; width: 50%; margin-left: 10%;">
    <div class="row">
        <div class="col-md-4 services-products" style="padding: 0;">
            <div class="col d-flex align-items-center justify-content-center">
                <div>
                    <img class="lazyload" src="//bewens.myshopify.com/cdn/shop/files/anissa_kermiche_reine_14_karat_gold_diamond_and_pearl_earring_1_large.jpg?v=1713833565">
                </div>
            </div>
        </div>
        <div class="col-md-5" style="padding: 0;">
            <div class="text-left">
                <div class="home-section-1-product-col-2">
                    <p class="home-section-1-product-title-1">title one</p>
                    <p>Our loyal customers have taken note of</p>
                </div>
                <div class="home-section-1-product-price">
                    <p class="home-section-1-product-price-h2">99.00 IN</p>
                </div>
                <p class="section-1-product-strike text-center" style="margin-bottom: 0 !important;">ANKUBA-TU <strike> 130.00 IN </strike></p>
                <div class="d-grid gap-2">
                    <button class="py-md-3-custom btn btn-primary py-md-3 px-md-5 me-3" style="margin-bottom: 10px !important;">Discover</button>
                </div>
            </div>
        </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

The mouse pointer adjusts according to the event

I am working on an ajax request and I have implemented a feature where the cursor changes appearance. document.body.style.cursor = "wait"; This immediately shows the cursor as a spinning circle when the request starts. At the end of the request, I ch ...

javascriptjquerycssajax

CSS fixed dynamically with JavaScript and multiple div elements placed randomly

Is it possible to dynamically change the position of multiple div elements on a webpage without reloading? I am looking for a way to modify the top and left positions of several divs, all with the same class, simultaneously. I want each div to have a diff ...

javascriptjquerycsshtml

PHP Pear Mail HTML Edition

Despite being able to successfully send emails with text content, I'm facing difficulties in sending HTML emails. The authentication is turned off and Google Apps authenticates based on the server's IP address. $message = 'Blah blah blah&ap ...

phphtmlemailpear

Creating a tool to display mouse coordinates as a pointer on an HTML5 canvas

I'm struggling with mouse coordinates while working on canvas in HTML5. My approach involves using JavaScript for drawing on the canvas. Below is my current code to track the mouse pointer within the canvas: $('#canvasID').mousedown(functi ...

javascripthtmlcanvasdrawing

How can I establish the conversion from pixels to em units?

According to a source I found, 1 em is equivalent to 16px. You can read more about it here. Despite setting the font-size to 100% in the body and using font-size: 1em, the standard font size in my Jekyll site remains 12px. Curious? Visit my Jekyll site a ...

htmlcssjekyll

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

javascriptjqueryhtmlcsssidebar

What is the best way to enlarge an image while keeping it contained within a card using Bootstrap?

Is it possible to create a visually appealing card similar to the image provided using Bootstrap 5.3.3 and HTML on a website? https://i.sstatic.net/OH4U0.png ...

htmlcssbootstrap-5card

Challenges with implementing ng2-auto-complete in Angular2

I successfully integrated the Angular 2 ng2-auto-complete component into my project by following this helpful tutorial. The code is also available on GitHub. The current challenge I am encountering involves the formatting of my data source. It is structur ...

javascripthtmlangular

CSS Hyperref and Anchor tags

It appears that when adding an 'href' tag to my anchor, all of the CSS formatting is lost. Is there a special way that CSS treats links? Below is the basic CSS: .topmenu > ul > li > a:visited, .topmenu > ul > li > a:active, .t ...

htmlcss

Deleting an item from a Vue.js list

I'm currently working on a project to develop a basic webpage that allows users to add or remove textboxes using vue.js. new Vue({ el: "#app", data() { return { list: [] }; }, methods: { deleteFromList(index) { this ...

javascripthtmlcssvue.jsweb

What is the best way to determine the accurate size of a div's content?

There are 2 blocks, and the first one has a click handler that assigns the block's scrollWidth to its width property. There is no padding or borders, but when the property is assigned, one word wraps to the next line. The issue seems to be that scrol ...

javascripthtmlcss

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons Below is some c ...

htmlcssangulartypescript

I'm curious to know why my jQuery function fadeOut is functioning properly while slice isn't working as expected

I'm trying to create a button that displays three consecutive posts After clicking on "view all", the three "div" elements should become visible I'm attempting to use jQuery to make the three 'div' elements appear when the view all bu ...

javascriptjqueryhtml

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

htmlcssbackgroundoverlayfullscreen

Is there a way to increase the size of my ASP.NET CalendarExtender component?

As I work on adapting my company's website for mobile devices, I find myself facing a challenge with manipulating the CalendarExtender on one of the text fields. Although most of my experience lies in HTML manipulation rather than ASP.NET programming, ...

c#asp.nethtmlvisual-studio-2010calendarextender

Angular HTML fails to update correctly after changes in input data occur

Within my angular application, there is an asset creator component designed for creating, displaying, and editing THREE.js 3D models. The goal was to implement a tree-view list to showcase the nested groups of meshes that constitute the selected model, alo ...

htmlangulartypescript

Is there a way to automatically update the child option when the parent option is altered?

I am attempting to modify the child option based on the parent option selection, similar to how it works in Bootstrap. ` <div class="wrap-input100 input100-select bg1"> <span class="label-input100">Indus ...

htmlcssdrop-down-menubootstrap-5optionmenu

Symfony 2 lacks the ability to automatically create the web/bundle/framework structure

I encountered a major issue with Symfony. After installing Symfony 2.7.5 via the command line: $ symfony new my_project The problem arose in the generated project directory: /web/bundle In this folder, I found two empty files (not directories!) named fr ...

phpcsssymfony

Is there a way to update the value of a variable with the help of a checkbox?

When I check the checkbox, the specOrder const gets updated as expected. However, I am struggling to figure out how to remove the value when the checkbox is unchecked. Below is the code I have been working on: const SpecialtyBurgers = () => { cons ...

javascripthtmlreactjs

What is the best way to make Bootstrap 3 move to a new line when there is not enough space?

I am facing an issue with a lengthy text inside a div with a class of "col-md-3". The text is so long that it appears to be overlapping with the content of another div. Adding spaces is not an option as it is an email address, and it displays fine on some ...

htmlcsstwitter-bootstrap