Adjusting the dimensions of two pictures side by side using Bootstrap 3

I've been experimenting with Bootstrap to align two images side by side using different columns. I made sure they were aligned properly and even added some background colors for better visibility.

However, when I tested the responsive design by changing the resolution, I noticed that the images did not resize equally. They had the same height but different widths. Any ideas on why this is happening?

Below is the HTML code snippet:

.coresq {
  background-color: #131313;
}

.cordir {
  background-color: #AAAAAA;
}

.top-shows {
  margin-left: 0;
  margin-right: 0;
}

.top-shows [class^="col-"] {
  padding-right: 0;
  padding-left: 0;
}
<div class="container">
  <div class="row top-shows">
    <div class="col-xs-4 coresq ">
      <img src="img/slogan_part_1.jpg" alt="image" class="slogan_l img-responsive"/>
    </div>
    <div class="col-xs-8 cordir">
      <img src="img/slogan_part_2.jpg" alt="image" class="slogan_r img-responsive"/>
    </div>
  </div>
</div>

When I reduced the display size, I expected the responsive properties to resize equally since they are on the same line. Why aren't they resizing proportionally?

htmlcssimageresponsive

Answer №1

There are two variations of column sizes available. col-xs-4 and col-xs-8

To ensure both images have the same width, you should use identical column sizes. Consider using col-xs-6 for both columns to achieve this.

Answer №2

There is a disparity in column width between the two images, with one using double columns (xs-8) compared to the other (xs-4), causing the smaller column to be overshadowed when resizing.

Feel free to resize this external JSFIDDLE with equally sized columns

(Also, ensure that the images have equal dimensions as in the provided fiddle)

Answer №3

After conducting some research, I delved into Flex and also came across the updated version of bootstrap (4, which is still in alpha stage). Intrigued by what I read, I decided to give it a try. To my delight, it worked exactly as I had hoped, with only minimal adjustments needed in the code.

While the custom css remained the same, I utilized Bootstrap 4 (in alpha for testing purposes) and included the following HTML:

<div class="container">

    <div class="d-flex flex-row">

      <div class="col-xs-4 coresq ">
        <img src="img/slogan_part_1.jpg" alt="image" class="slogan_l img-fluid"/>
      </div>

      <div class="col-xs-8 cordir">
        <img src="img/slogan_part_2.jpg" alt="image" class="slogan_r img-fluid"/>
      </div>

    </div>


  </div>
  .

PS: It appears that the snippet preview is cutting off the last div tag in the code for reasons unknown. Just adding this note to clarify.

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

Managing Input Type Dropdown Selections Using Jquery

I am currently in the process of developing a website. On this website, there is a form that includes 3 dropdown menus as shown below. I would like to implement a feature where selecting the number 5 from the Adults menu will automatically display 5 in the ...

javascriptjqueryhtml

What is the best way to incorporate multiple countdown timers on a single HTML page?

I am in the process of developing an online auction site and I need to include the end time and date for each auction. To achieve this, I have created a countdown.js file with the following code: // set the date we're counting down to var target_dat ...

javascripthtmlcountdowntimer

Undo a CSS transition when clicked

There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...

javascriptjqueryhtmlcss

What might be the reason for jQuery not functioning in Internet Explorer 11?

Working on developing a slideout menu for my website using jQuery. It functions perfectly in Chrome, but encountering issues in Internet Explorer (IE11). Extensive search hasn't provided a solution yet. Seeking assistance and any help would be highly ...

javascriptjqueryhtmlcssplugins

Animation fails to initiate when the object enters the viewport

I attempted to inject some enchantment into my project by implementing code from a tutorial found on this CodePen. However, I encountered an issue where the code only functions properly within that specific CodePen environment. Even after copying the same ...

javascriptjqueryhtmlcssviewport

Center-align the text in mui's textfield

What I'm looking for is this: https://i.stack.imgur.com/ny3cy.png Here's what I ended up with: https://i.stack.imgur.com/vh7Lw.png I attempted to apply the style to my input props, but unfortunately, it didn't work. Any suggestions? Than ...

javascriptcssmaterial-ui

What is the best way to ensure that circles only touch each other by their edges?

Trying to align three circles touching each other has been a challenge for me. Although I have successfully managed to make two touch, the third one remains elusive. How can I ensure that all three circles are in contact with each other, especially when th ...

javascripthtmlcss

Looking to make changes to the updateActivePagerLink setting in JQuery Cycle?

I'm in the process of developing a basic slideshow with 3 images, and I am relatively new to Jquery and Cycle. The slideshow is functioning properly, and the 3 pager links are also functional. The only remaining task for me is to implement "activeSli ...

jqueryhtmlcssjquery-pluginsjquery-cycle

Is there a way to include text beneath the navigation bar and other elements on the page?

I am stuck trying to add some text below my header and navigation bar. Here is the code I've been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt ...

htmlcsstextheadernav

Can someone assist me in creating a clickable link that opens a menu in HTML when clicked?

I have been attempting for the past few days to open the megamenu by clicking on a link, but despite my efforts, I have not been successful. After reviewing some code, I discovered a clue in the CSS. It seems that setting the visibility value to visible wi ...

javascripthtmlcss

Positioning an element in the center of another using JQuery

Greetings! I am currently working with some elements that look like this: <div id="one">content</div> <div id="two">content</div> These elements are followed by another set of elements (without any parent, placed directly after th ...

javascriptjquerycsspositionpositioning

What is the best way to restrict the length and number of lines in a textarea based on pixel dimensions?

I am looking to create a textarea where people can select different fonts, such as "sans-serif" and "serif", to type in text. I plan to have buttons labeled "sans-serif" and "serif" that will change the font of the textarea when clicked. However, there ar ...

javascriptjqueryhtmlcsshtml5-canvas

Creating a NgFor loop in Angular 8 to display a dropdown menu styled using Material

I'm currently facing an issue with incorporating a Materialize dropdown within a dynamically generated table using *ngFor. The dropdown does not display when placed inside the table, however, it works perfectly fine when placed outside. <p>User ...

cssangulardropdownmaterializeangular-materialize

Is it possible to resize the background-image style?

When using the regular img tag in HTML, you can specify the width and height, and the browser will scale the image. If the dimensions are not too different from the original, the result is usually decent. For example, you can scale the avatar image to 32x ...

htmlcss

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

Hey there, take a look at this cool stuff http://jsfiddle.net/J9Tza/ <form class="validation"> <div> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" r ...

javascriptjqueryhtmlforms

Reading settings from web.config file in an HTML page

Currently working with ASP.NET 3.5 web forms. I've recently saved the path of my website in the web.config file under the key "CommonPath". I have a basic static HTML page that I would like to utilize this key on. Any suggestions on how to achieve ...

asp.nethtmlweb-config

Ways to ensure the bootstrap table header width aligns perfectly with the body width

I am having an issue with my bootstrap table where the header width is smaller than the body width because I set the table width to auto. How can I align the header and body widths? Here is a link to a plunker showcasing the problem. https://plnkr.co/edit ...

javascripthtmlcsstwitter-bootstrapangular-ui-bootstrap

When combining CSS grids, nesting them can sometimes cause issues with the height layout

Check out the code on jsFiddle .component-container { width: 800px; height: 200px; background-color: lightyellow; border: 1px solid red; padding: 10px; overflow: hidden; } .component-container .grid-container-1 { display: grid; grid-tem ...

javascripthtmlcsscss-grid

Mastering the Art of Stacking with FontAwesome

I am working on stacking the Soundcloud icon manually to display it within a square similar to fa-facebook-square. However, my Soundcloud icon is appearing under the square. This is the code I have so far: <div class="row"> <ul style="list-s ...

htmltwitter-bootstrapcssfont-awesome

Are there any known browser compatibility issues with using "./" (dot slash) before HTML files?

Within the realm of shells, using ./ to indicate the current directory is quite common and generally not perceived as risky when specifying a path. On the other hand, in HTML coding, it's typical to omit ./ and instead directly specify the file name. ...

htmlcss