"Bootstrap is not aligning div md-6 as expected, instead it is sending it

Within my simple layout, I have 4 columns (col-lg3 col-md/sm-6 and col-xs-12). The display is straightforward, like this:

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

Everything functions perfectly when each column has a width of 3. However, when they adjust to md or sm width, one of them drops down instead of aligning with the others:

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

I'm struggling to identify the issue. Any suggestions? Below are the HTML and CSS codes:

<img src="\galeria\repositorio\images\landing\mensalidades-iguais\depoimento-header.png" class="img-responsive"/>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-up">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        Support to learn and peace of mind to pay. Skill was essential in helping me secure a scholarship to Spain!
                    </p>
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-up">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\gabriel.png"/>   
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        Dreaming isn't expensive, especially at Skill! Learning English will make all the difference when trying to land my first internship.
                    </p>       
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-down">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\eduardo.png"/>
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        It all began at Skill. I was a student and now I work at a startup!
                    </p>                    
                </div>
                <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                    <div class="img-depoimentos-down">
                        <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                    </div>
                    <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                    <p class="txt-depoimentos">
                        Fluent English and savings in my tuition allowed me to travel. Thanks to Skill, I've experienced new cultures around the world.
                    </p>                 
                </div>
            </div>
        </div>

//CSS code for lg-3
.quotes {
    padding-bottom: 15px;
}.img-depoimentos-up {
    max-width: 100%;
    height: auto;
    margin-top: -80%;
}

.img-depoimentos-down {
    max-width: 100%;
    height: auto;
    margin-top: -80%;
}
.txt-depoimentos {
    color: rgb(71, 107, 172);
    font-weight: bold;
    font-size: 18px;
}

//Changes made using media query for md-sm-6
img-depoimentos-up {
    margin-top: -30%;
}
.img-depoimentos-down {
    margin-top: 10%;
}

Answer №1

If you're looking for a new approach, consider the following:

HTML :

    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-up">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    Finding support to learn and peace of mind to pay. Skill was essential in helping me secure a scholarship to Spain!
                </p>
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-up">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\gabriel.png"/>   
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    Dreaming doesn't have to be expensive, especially at Skill! Learning English will make all the difference when it comes to landing my first internship.
                </p>       
            </div>
            <div class="clearfix hidden-lg hidden-xs"></div>  <--- HERE

            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-down">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\eduardo.png"/>
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    It all started at Skill. I was a student and now I'm a teacher! Today, I work at a startup.
                </p>                    
            </div>
            <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                <div class="img-depoimentos-down">
                    <img src="\galeria\repositorio\images\landing\mensalidades-iguais\beatriz.png"/>
                </div>
                <img class="quotes" src="\galeria\repositorio\images\landing\mensalidades-iguais\quotes.png"/>
                <p class="txt-depoimentos">
                    Speaking English fluently and saving on tuition helped me travel. With Skill, I experienced new cultures around the world.
                </p>                 
            </div>
        </div>
    </div>

For more information : https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

Answer №2

It appears that you are trying to make the .img-depoimentos-up div responsive instead of the image itself. Here is a suggestion:

.img-depoimentos-up {
        margin-top: -80%; 
    }

.img-depoimentos-up img {
    max-width: 100%;
    height: auto;
}

I hope this solution works for you.

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

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

The POST request is coming back as null, even though it includes both the name and

Having issues with a login PHP code where the post method is returning an empty string. Here is my HTML code: <form action="iniSesion.php" method="post"> <div class="form-group"> <input type="email" name="email_" class ...

I have a dynamic blog site that is generated on the fly using Ajax, making the content unsearchable

I have a blog website that is created dynamically using Ajax (XMLHttpRequest) and the HTML History API. One issue I am facing is that my content is not searchable by search engines like Googlebot. I know that Google is now able to analyze such sites, but w ...

HTML Input Hidden : Completely Concealed

I have been working on creating a 'captcha' for my website, and this is the code I am using: <form class="captcha" method="post"> <label><?php echo $captchas ?></label><br> <input name="captcha" /> <input t ...

Email header image alignment issue in Thunderbird

I recently created an HTML email using a template and it looks great on most platforms, but not in Thunderbird. The header image is not aligned properly above the content as shown in the screenshot. Does anyone know how to troubleshoot this issue or have a ...

Creating a dynamic dropdown menu that changes based on the selection from another dropdown menu

I'm working on a project that requires users to make specific selections in dropdown menus that are interconnected. Does anyone know how to set up a form so that the options in dropdown menu #2 change based on what the user selects in dropdown menu #1 ...

Develop a game timer using CreateJS

Looking for advice on the most effective method to create a timer clock using Createjs. I've attempted to reference HTML elements with DOMElement in the past, but encountered difficulties. Essentially, I need to display a timer within a container so p ...

Identifying various device platforms through CSS styling

After extensive research and testing, I have explored a variety of resources and solutions for implementing device-specific CSS on my webpage. Here are some of the references I've studied: Detect iPhone/iPad purely by css Detect Xoom browser (Andro ...

Show HTML form elements on the page using jQuery or JavaScript

Is there a jQuery or JS library that can perform the following task: If the user inputs 'x' in A01, then make A01_1 visible. Otherwise, do nothing. <form id="survey"> <fieldset> <label for="A01">A01</label&g ...

Angular Markdown Styling: A Guide

Currently, I am using Angular and Scully. I would like to add style to the image in a markdown file within Angular, but I am unsure of how to accomplish this task. The image is currently displaying too large. Can anyone provide me with useful advice on how ...

Content positioned beside an image with the help of Bootstrap 4 framework

How can I align text to the right of an image, like a table layout? I experimented with grid layout using <div class="span2"> and <div class="span10"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bo ...

How to Transform a Navigation Bar into a Carousel

I am creating a website that is designed to be responsive. Currently, I have a horizontal navigation bar which collapses into a drop-down menu when the screen size decreases. When each tag in the menu is clicked, a different image loads into a designated ...

What is the method for displaying html files in a POST request?

This is the code snippet I am working with: app.post('/convert', function(req,res){ var auxiliar = "somo Ubuntu command line(this works)"; exec(auxiliar, function(err, stdout, stderr){ if(err){ console.log ...

The starting point of an html text is signified by < and it concludes with >, showcasing

My HTML <div> <Sample text> </div> <div> <SampleText> </div> In both examples above, blank content is appearing after the DOM is created. I anticipate displaying the text as it appears. Your assistance with this matt ...

Smoothly transition the box shadow using CSS3's ease-in and ease-out effect

Struggling to achieve a smooth easing effect for a box shadow transition using CSS3. This is the current CSS code in use: #how-to-content-wrap-first:hover { -moz-box-shadow: 0px 0px 5px #1e1e1e; -webkit-box-shadow: 0px 0px 5px #1e1e1e; box-s ...

Angular CSS: ng-style applied to only one side, the other remains unaffected

I am working on an Angular application that requires a split screen with two halves, each displaying the same array values. The width and height values are set using a service and accessed by a controller. The style is applied using ng-style in the DOM. Ho ...

The dimensions on Next.js pages exceed those of the viewport by a significant margin

I have recently encountered a perplexing issue where the dimensions of my webpage appear to be 2.7 times larger than the viewport, even when there is no content or styles applied. The strange part is that it seems as though the page has been scaled up, eve ...

Drawer component from Material-UI placed on top of the sidebar

Currently, I am working on a project where I am using React TypeScript along with Material-UI. The issue that I am encountering is related to the width of the Drawer component provided by Material-UI. By default, the Drawer takes up the entire screen wid ...

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

Customizing CSS based on URL or parent-child relationship in WordPress

I'm having trouble finding a solution for what seems like a simple issue... Currently, my header has a border-bottom and I'd like to change the color of this border based on the section the user is in. For example, consider these parent pages: ...