Arrangement of elements in Bootstrap

Is there a way to prevent my frame from overflowing compared to its parent class when using bootstrap's row class? How can I address this issue? https://i.sstatic.net/gR7Ep.png Here is my code: html:

<div class="container">
<div class="content-title">
                <div class="row">
                    <div class="img-content-title col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <img src="" alt="">
                    </div>
                    <div  class="detail-content-title col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
                </div>
              </div></div>

Css:

.content-title {
  width: 100%;
  height: 392px;
  background: red;
  box-shadow: 0px 16px 48px rgba(47, 57, 152, 0.08);
  border-radius: 40px;
}
.content-title>div{
    height: 100%;
    width:100%;
}
.img-content-title{
    border-radius: 28px;
    border:  1px solid;
    height: 100%;
}
.detail-content-title{
    border-radius: 28px;
    border:  1px solid;
    height: 100%;
}

Is there a way to solve the overflow issue caused by the margin-left/right: -15px attribute of the row in Bootstrap while still maintaining responsiveness with row and col classes?

Answer №1

If you want to make use of the mx-0 class, here is an example for you:

.content-title {
  width: 100%;
  height: 392px;
  background: red;
  box-shadow: 0px 16px 48px rgba(47, 57, 152, 0.08);
  border-radius: 40px;
}
.content-title>div{
    height: 100%;
    width:100%;
}
.img-content-title{
    border-radius: 28px;
    border:  1px solid;
    height: 100%;
}
.detail-content-title{
    border-radius: 28px;
    border:  1px solid;
    height: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232465c445c40">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="content-title">
    <div class="row mx-0">
        <div class="img-content-title col-lg-6 col-md-6 col-sm-6 col-xs-12">
            <img src="" alt="">
        </div>
        <div  class="detail-content-title col-lg-6 col-md-6 col-sm-6 col-xs-12"></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

Interacting with Watir and Cucumber, unfortunately the link is not functional

Being new to the world of Watir and Cucumber, I am currently in the process of running an automation script to create Live IDs. The link that I want to click on the webpage is labeled "New" and it should take me to a form where I can add a new contact for ...

JQuery isn't functioning properly on dynamically generated divs from JavaScript

I'm currently tackling an assignment as part of my learning journey with The Odin Project. You can check it out here: Despite creating the divs using JavaScript or jQuery as specified in the project requirements, I am unable to get jQuery's .hov ...

"Include the 'unsafe' prefix at the start of the URL in AngularJS

Whenever I attempt to access app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 within my app, the URL gets parsed as ==> unsafe:app://csttree?featuretype=cst_issue&verticalid=2132321&l1=3213&l2=3242 Is ...

Seeking a template for a server-side programmer who lacks proficiency in CSS and design?

Hey there all you wise folks! So here's the deal - I'm a PHP/JavaScript wizard when it comes to logic and server-side stuff, but I really suck at design, CSS, and all things arty. Does anyone have any recommendations for a template or tool that ...

Run JavaScript upon the webpage loading without the dependency of jQuery

Is there a way to ensure that JavaScript code is executed only after the entire page has loaded, without relying on jQuery? Take this example... <html> <head> <script type="text/javascript"> var box = document.ge ...

When I click the login button, a .ttf file is being downloaded to my computer

I have encountered an issue with my web application where custom font files in .ttf, .eot, and .otf formats are being downloaded to users' local machines when they try to log in as newly registered users. Despite attempting various solutions, I have b ...

The web server experiences a layout and functionality breakdown caused by an issue with the config.js file following the uploading process

I recently created a website. However, when I uploaded it to my hosting company's server and tested it on different browsers, the layout appeared broken. Some of the CSS files loaded properly, but certain elements and styles were not in their correct ...

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

How can I place a DOM element without relying on style properties?

Before diving in, let me provide some context. I am currently developing a visual element that operates similar to a spreadsheet. It features scrollable content areas in both directions, with axis indicators on the left and top that remain visible at all t ...

Exploring CSS Outlining in Visual Studio 2013

Back in the days of Visual Studio 2010, whenever you opened a CSS file, a window would automatically pop up displaying all the classes and IDs for easy navigation within the file. However, in Visual Studio 2013, I seem to be unable to locate this helpful ...

The CSS media query isn't functioning properly on Safari browser

Currently, I am working on a project using React JS and CSS. In order to make it responsive, I have implemented media queries. However, I have encountered an issue where the media query is not functioning properly in Safari browsers on both phones and PC ...

Storing the selected values from multiple checkboxes into an SQLite database with PHP PDO

Hi, I have two checkboxes named "Male" and "Female". If a person selects "Male" and does not select "Female", I want it to input nothing or false in the database. However, if "Female" is not selected, an error is returned: Undefined index: Female in /stora ...

Is there a way to activate the autoplay feature for this?

I'm really new to Jquery and most of this code isn't mine, I'm just using it as a learning tool for creating sliders. If someone could give me some guidance on how to make this slider work automatically when the page loads, that would be gre ...

Updating the style sheet of a selected menu item on an ASP.NET master page

I created an asp.net master page with a menu setup like this: <menu id="menu"> <nav id="main_nav"> <ul id="menu-primary"> <li ><a href="./">Home</a></li> <li><a href="staff.aspx"& ...

How can HTML output be automatically indented?

Seeking a way to automatically indent the HTML generated by my PHP script. I currently use HTML Purifier for validating internal textbox inputs, but I have reservations about using HTML Tidy due to its lack of active development and numerous reported bugs ...

Navigate post Ajax call

When I make an unauthenticated GET request using AJAX, my server is supposed to redirect my application. However, when I receive the redirect (a 303 with /login.html as the location), the response tab in the Firebug console shows me the full HTML of the lo ...

Switch up the appearance of a button by altering its image depending on the value it holds

There are two buttons generated dynamically (not within my control) that I would like to customize with different images. Since I can't actually change the button code, I believe I will need to utilize CSS to achieve this based on the CSS values. The ...

Video from Brightcove continues to play even after closing the modal dialog

My concept for opening a Brightcove video in a modal dialog when a button is clicked has been successfully implemented. Below is the code snippet I used for this implementation: Html code: <a class="videoTutorialB" href="#">Watc ...

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...