column with medium width of 4 is displaying oversized content

Hi there, I'm new to the forum and also to bootstrap. I have a problem with my layout that I can't quite describe (I am thinking in Spanish). Here's what's going on:

I have three col-md-4 columns: the first column contains only text, while the other two contain images with auto height. The problem is that the first text column appears larger in height than the image columns, creating a gap underneath the images.

Here is some CSS code snippet that might be relevant to the issue:

body {
            overflow-x: hidden;
        }
        
        .container-fluid {
            padding-left: 0;
            padding-right: 0;
        }

        /* More CSS rules... */

Here are links to screenshots for better visualization of the issue:

See screenshot here

See another screenshot here

htmlcssbootstrap-4

Answer №1

In order to set Height:100% for the img-fluid class, you must include the following code:

.img-fluid {
    max-width: 100%;
    height: 100%;
}

Keep in mind that you can eliminate margin-left & margin-right from the .row class to avoid any image overlapping.

Answer №2

I recently visited your website and noticed that you have added rows within the col-md-4 which is causing some margin issues. Here's a suggestion to resolve it:

        <div class="d-flex">
            <div class="col-md-4 col-lg-4 Noticias_profile">


                <div class="d-flex color1">
                    <img class="img-fluid rounded-circle circulo" src="./img/4anioservicio.jpg" data-holder-rendered="true">
                    <h4>Años de servicio<br>Javier Gonzáles<br>Contáctologo</h4>
                </div>

                <div class="d-flex color2">
                    <img class="img-fluid rounded-circle circulo" src="./img/5reciennacido.jpg" data-holder-rendered="true">
                    <h4>Recien Nacidos<br>Macarena Alfaro<br>Febrero</h4>
                </div>

                <div class="d-flex color3">
                    <img class="img-fluid rounded-circle circulo" src="./img/6cumple.jpg" data-holder-rendered="true">
                    <h4>Cumpleaños<br>Renata Gonzáles<br>Contáctologo</h4>
                </div>
            </div>

            <div class="col-md-4 col-lg-4 ">
                <img class="img-fluid" src="./img/7beneficios.png">
                <div class="titulo">
                    <p>Beneficios.</p>
                </div>
            </div>

            <div class="col-md-4 col-lg-4 ">
                <img class="img-fluid" src="./img/8formulario-beneficio.jpg">
                <div class="titulo">
                    <p>Formluario de Beneficios</p>
                </div>
            </div>
        </div>

To fix this issue, you can remove the row class and replace it with the d-flex class.

Answer №3

Appreciate the responses as they helped solve my issue. However, I'm experiencing some trouble with how the icons appear on responsive design. Can anyone recommend a good Bootstrap course? I've already completed CSS - The Complete Guide (incl. Flexbox, Grid & Sass) and started learning from scratch, but I still feel unprepared for larger projects.

[link] https://i.sstatic.net/h5XyZ.jpg [link] https://i.sstatic.net/byOzr.jpg

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

Unable to attach an onClick event handler to <TableRowColumn> element using Material-UI in React

In the past, I had a feature that allowed me to change the color of the text from red to green by clicking on a table cell. After introducing Material-UI in my React app and replacing the <td> tags with <TableRowColumn> tags, I noticed that th ...

javascripthtmlreactjsmaterial-ui

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

javascripthtmlangularjs

Can a specific CSS rule be written in Material UI using makeStyles that will only apply if the element has both classes together?

It's common knowledge that achieving this in CSS is a possibility. .makeStyles-mainNavWrapper-67.sticky{ position: fixed; top: 0px; opacity: 1; transition: opacity 1s ease; padding: 10px; } I am curious to find out if this can be achieved ...

javascriptcssreactjsmaterial-ui

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

javascriptcssreactjsreact-data-grid

Tips for utilizing the onload attribute alongside the ng-controller directive to run a function that has been established within the controller

When trying to call the submit() function as soon as the page loads, I keep encountering a submit() method not found error. The positioning of ng-controller and onload is confusing to me. If there is an alternate method in Angular to achieve this, please ...

javascriptjqueryhtmlcssangularjs

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

I have recently started learning PHP and I'm in the process of creating a dynamic page that will update based on which form buttons are clicked. The functionality is working correctly, but my goal is to enable users to upload multiple files - either P ...

phphtmlarraysbuttonmove-uploaded-file

Toggle class with jquery if the checkbox is checked

I am trying to achieve a simple task using jQuery. I have a checkbox inside a box, and I want to toggle a class on the box with a transition when the checkbox is checked. However, my code is not working as expected. Here is what I have: $(document).ready( ...

javascriptjqueryhtmlcsscheckbox

What is the best way to position buttons on the same line, with one on the left and

How can I adjust the layout of my previous and next buttons so they appear on the same line? Currently, my buttons are displayed like this: https://i.sstatic.net/6zQxs.png <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3 ...

htmlbootstrap-5

Troubleshooting Issue: Difficulty with jQuery DataTables Responsive Table header functionality when using ASP GridView

The dataTable works perfectly when the window is set to one screen size (width). However, when the screen width is changed, the table head does not resize automatically. This issue seems to occur only when the scrollY property is set on the dataTable. Once ...

jquerycssasp.netgridviewdatatables

Illustrative Python Django email submission form demo

I am currently working on creating a contact form for my website, but I am struggling to find examples using Django. While PHP email forms are readily available, I don't have the knowledge to create one from scratch using Django. Is there anyone who c ...

pythonhtmldjangoformsemail

IE7, IE6 display margins differently compared to other browsers

Can anyone help with an issue I'm having with a CSS ul list menu? #header-container #header ul.top-nav { float: left; margin: 20px 0 20px 10px; } #header-container #header ul.top-nav li { float: left; margin-right: 8px; border-rig ...

css

Styling with CSS using the em unit to make an image half the size of its parent div element

I'm struggling with resizing an image within a div using the em size unit. I want the image to be half the size of its parent div, so I set both the width and height CSS properties of the image to 0.5em. However, when looking at the code below, you c ...

htmlcssfont-size

Is it possible to alter the location of a button through a click event

On the left side of the container, there is a button with the text "Go Right!". When clicked in this position, the button moves to the right side of the container. When the button is on the right side, the text changes to "Go Left!" and clicking it will m ...

javascripthtmlcss

Adjust the class attribute in real-time

My image doesn't appear in the correct position when I dynamically set it using the margin-top. Below is an image with a red arrow pointing to the right, which is what I want: https://i.stack.imgur.com/ue4mY.png The CSS I have is as follows: .file ...

htmlcssangularjs

Step-by-step guide on implementing a see-more/read-more feature using only anchors in the HTML

I am currently developing a website that will be managed by individuals who are not very tech-savvy. I want to empower them with the ability to add "see-more" anchors that utilize jQuery slide up/down functionality to reveal content. While my code works w ...

javascriptjqueryhtml

How to style CSS to ensure printed table content fits perfectly within the page

Does anyone know how to resize the contents of a table using CSS so that everything shows up when printing, without wrapping text in individual cells? In this scenario, <table class="datatables" id="table1"> <tr> <td style="white-space:nowr ...

htmlcssprintinghtml-table

Identifying the previous slide in a Bootstrap 4 Carousel

Imagine I'm on slide 9 and navigate to slide 8 using the link below: <a class="carousel-control-btn" href="#Carousel" role="button" data-slide-to="8"> Now that I'm on slide 8, is there a method to identify the previous slide I came from? ...

jqueryeventsbootstrap-4carousel

Attempting to replicate the action of pressing a button using Greasemonkey

I am currently working on a greasemonkey script to automate inventory updates for a group of items directly in the browser. I have successfully implemented autofill for the necessary forms, but I am facing challenges with simulating a click on the submissi ...

javascripthtmlformsgreasemonkeyform-submit

How to reduce the text input field size in Django Bootstrap for a sleeker design

I have a form with various elements like textfields, radio buttons, and text areas. The textfield size is currently too small and does not look good: https://i.sstatic.net/ghimd.png I'm wondering how I can make the textfields slightly larger and why ...

htmlcssdjangotwitter-bootstrap

Aligning characters according to Unicode standards

I'm looking to showcase a Unicode character at the center of a button. Below is the code snippet: <div class="col-xs-1"> <button class="btn btn-tool"> <span></span> </button> </div> span:before { ...

htmlcssunicode