The margins are not being maintained by the columns

Currently, I am using Bootstrap 3.3.7 and facing an issue with the alignment of smaller columns in relation to bigger columns. To see a demo, click here.

I have set a margin of 10px between the columns.

For example, the first row consists of the following columns: 600x410px - 600x200px - 300x200px.

The total height calculation is 

200px + 200px + 10px margin = 410px height
. Thus, I set the height of the big column to 410px.

However, despite these calculations, the columns are still not aligning as expected. What could be causing this misalignment?

htmlcsstwitter-bootstrap

Answer №1

Replace 

.img-responsive { height: 100%; }
with .img-responsive {width:100%; } in the code below. Make sure to also set the width for smaller screens using the following media query: 
@media (max-width: 768px) { .img-responsive { width: 100%; } }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
/* Custom Card and Button Styling */
body {
  background-color: #f5f5f5;
}
div {
  background-color: #fff;
}
/* Additional styling for cards */
/* Additional styling for buttons */
/* Media Queries for Grid Elements */
@media (min-width: 768px) {
  .card {
    position: relative;
  }
  .card-content {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .card-content h4,
  .card-content p {
    color: white;
    width: 100%;
    float: left;
    margin: 0 0 5px;
  }
  .card-content a {
    float: right;
  }
}
/* Additional margin styling */
.row [class*="col-"] {
  padding-right: 5px;
  padding-left: 5px;
}
.row {
  margin-left: -5px;
  margin-right: -5px;
}
.card-img-bottom {
  color: #fff;
  height: 20rem;
  background: url(images/img1.jpg) center no-repeat;
  background-size: cover;
}
.img-responsive {
  height: 100%;
}
@media (max-width: 768px) {
  .img-responsive {
    width: 100%;
  }
}
</style>


<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="row">
        <div class="col-sm-6 margin_bottom">
          <img src="http://placehold.it/600x410" alt="5" class="img-responsive" />
        </div>
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-12 margin_bottom">
              <img src="http://placehold.it/600x200" alt="5" class="img-responsive" />
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6 col-sm-6">
              <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
            </div>
            <div class="col-xs-6 col-sm-6">
              <img src="http://placehold.it/300x200" alt="5" class="img-responsive" />
            </div>
          </div>
        </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

Can a CSS3 filter be utilized to transform gradient colors into solid colors?

I have an interesting scenario where I am using a -webkit-mask with a radial-gradient to create small dots on a background image. These dots are transparent, allowing the background image to show through. However, each dot has a gradient color within it. ...

csscolorsradial-gradientscss-filterscss-mask

Having trouble interacting with buttons while an overlay is open

When I try to use the overlay to move the text upwards and reveal buttons, I encounter an issue where I am unable to hover or click on those buttons. As soon as I try to interact with the buttons, the overlay and text come down, blocking my access. I have ...

htmlcssreactjsstylingcss-transforms

The CSS transition is failing to revert to its original state after being combined with animations

My goal is to create a loading animation using CSS transitions and animations. I have managed to achieve the initial loading effect by scaling with transition and then animating it to scale out on the x-axis. However, when attempting to transition back to ...

htmlcsscss-animationscss-transitions

Struggling to display a function's output on a separate web page within a flask application

After spending close to 10 hours on this, I find myself stuck. My restaurant search app is functioning perfectly when I print the output to the terminal. However, I can't seem to figure out how to display it on a new page. Here's a snippet of my ...

pythonhtmlsqliteflask

Transforming HTML into a Console Experience (Angular 16)

I'm experimenting with creating a console/CLI style experience using HTML. The goal is to have the input fixed at the bottom of the window, while commands and output rise up from the bottom and eventually disappear off the top of the screen, enabling ...

javascripthtmlcssangular

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Switch between Fixed and Relative positions as you scroll

Just a small adjustment is needed to get it working... I need to toggle between fixed and relative positioning. JSFiddle Link $(window).on('scroll', function() { ($(window).scrollTop() > 50) ? ($('.me').addClass('fix ...

javascriptjqueryhtmlcss-position

The div element on my website spans the entire width, yet it appears slightly narrower than the body

My website features a scrolling div element that spans 100% of the screen, but I am encountering an issue with slight horizontal scrolling and the background image extending beyond the visible area. I am striving to adjust the width of the div so that it ...

htmlcss

ASP.NET Core 3.1 dynamic image resizing

<div class="col-md-6"> <div class="border"> <img height="300" width="400" src="~/Images/vg.png" class="rounded"/> <p>This is a sample paragraph.</p&g ...

htmlcsstwitter-bootstrapasp.net-core

What is the most effective method for incorporating personalized React components in the midst of strings or paragraph tags

Summary: Exploring the frontend world for the first time. Attempting to integrate custom components within p-tags for a website, but facing challenges in making them dynamically changeable based on user interaction. Greetings all! As a newbie in front-end ...

javascripthtmlcssreactjs

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

cssmagento

How can we transfer parameters in JavaScript?

My vision may be a bit vague, but I'll try to explain it as best as I can. I want to implement multiple buttons that can toggle the visibility of a div (I have this functionality working already). Each button should carry two values (a number and a l ...

javascriptjqueryhtml

Arranging a flex item below another flex item within a flexbox container

Is there a way to use flexbox to ensure that the 2.5 element is placed below the 2 element instead of beside it on the same row within the flex container? Given the HTML provided, how can I achieve this layout using flexbox? I attempted to accomplish thi ...

htmlcssflexbox

Steps to display an angled bracket to indicate a line break

I have a div that is editable, allowing me to display the entered text. To indicate each new line, I would like to show a ">" symbol at the beginning of the line. HTML <body> <div> <span> &gt; </span> ...

jquerycsshtml

Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow https://i.sstatic.net/21BR4.png I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my ...

htmlcssangularcolorsangular-material

Creating uniform table column widths within a flex container with dynamic sizing

I am working on designing a navigation system for my website using a table inside a flexbox. I want to ensure that the table columns have equal width and can scale dynamically. Additionally, I aim to wrap the text in the data cells without changing the cel ...

htmlcss

Struggling to figure out the correct method for aligning calendar using bootstrap-datetimepicker?

Struggling with aligning the calendar correctly under a textbox while using bootstrap-datetimepicker in a form? The positioning seems off, and the calendar icon isn't where it should be. It's not behaving like a simple datetimepicker as shown in ...

csstwitter-bootstrapbootstrap-datetimepicker

Troubleshooting a Peculiar Problem with Form Submission in IE10

Please take a look at the code snippet provided below: <!DOCTYPE html> <html> <body> <form name="editProfileForm" method="post" action="profileDataCollection.do"> <input type="text" id="credit-card" name="credit-card" onfocu ...

javascripthtmlsubmitinternet-explorer-10onfocus

Python form submission error code 405 encountered

I recently developed a simple WSGI Server using Google app engine. Here's an example of the code: import webapp2 class MainHandler(webapp2.RequestHandler): def get(self): self.response.write(''' ...

pythonhtmlgoogle-app-engine

Unnecessary scrollbar appears in the Simple Material UI dialog demonstration

My Material UI dialog consists of a grid with a scrollbar that allows scrolling even though the content fits on the screen. <Dialog open={isOpen} onClose={() => changeIsOpen(false)}> <DialogContent> <Grid containe ...

cssreactjsmaterial-ui