Creating a responsive layout with full-height divs within Bootstrap 4 columns

I am struggling to achieve uniform height for all my .element elements and need the image to be vertically aligned in the middle if it is too small to fill the space. I have tried numerous approaches but haven't been able to find a solution.

.element {
  border: 10px solid #e6e6e6;
  margin-bottom: 20px;
}
.element .inner {
  padding: 15px;
}
.element .inner p {
  margin-bottom: 5px;
  text-align: center;
}
.element a {
  background-color: #424753;
  color: #fff;
  display: block;
  height: 30px;
  padding-top: 3px;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
</div>

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Answer №1

You can style the element, inner, and col-3 by adding properties like display: flex, flex-direction: column, and flex: 1. To center the img, you can use margin-top and margin-bottom with auto value.

.col-3,
.element,
.inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.element {
  border: 10px solid #e6e6e6;
  margin-bottom: 20px;
}
.element .inner {
  padding: 15px;
}
.element .inner p {
  margin-bottom: 5px;
  text-align: center;
}
.element a {
  background-color: #424753;
  color: #fff;
  display: block;
  height: 30px;
  padding-top: 3px;
  text-align: center;
}
.element img {
  margin-top: auto;
  margin-bottom: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
</div>

Answer №2

You have the option to utilize the latest Bootstrap 4 flexbox utilities which can help in minimizing the amount of excessive CSS code needed.

    <div class="row">
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
        <div class="col-3">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>

        </div>
        <div class="col-3 align-items-center">
            <div class="element d-flex h-100 flex-wrap justify-content-between">
                <div class="inner d-flex flex-wrap align-self-center justify-content-center">
                    <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg">
                    <p>Some text</p>
                </div>
                <a href class="align-self-end w-100">Link</a>
            </div>
        </div>
    </div>

Answer №3

If you desire a similar layout, consider incorporating position styling along with media-query styling for responsiveness.

.element {
  border: 10px solid #e6e6e6;
  margin-bottom: 20px;
  height: 225px;
  position: relative;
}
.element .inner {
  padding: 15px;
}
.element .inner p {
  margin-bottom: 5px;
  text-align: center;
}
.element a {
  background-color: #424753;
  color: #fff;
  display: block;
  height: 30px;
  padding-top: 3px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="row">
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.gimmesomeoven.com/wp-content/uploads/2015/08/How-To-Make-Crepes-5.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </div>
  </div>
  <div class="col-3">
    <div class="element">
      <div class="inner">
        <img class="img-fluid" src="http://www.comohacercrepes.com//ImagenesComoHacerCrepes/ImagenesCrepes/receta-crepes-masa-thermomix.jpg" />
        <p>Some text</p>
      </div>
      <a>Link</a>
    </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

Avoid having the java applet destroyed when the container is hidden

I am working with multiple DIVs, each containing text, a java applet (unfortunately...) and buttons. I am currently creating a search function to dynamically show and hide these DIVs. However, whenever I use display:none on a DIV, the applet inside it se ...

javajavascripthtmlcssapplet

Customizing Column Background Color with AngularJS

https://i.sstatic.net/OHFFF.png My current webapp highlights the day of the week on a table for the current day and the day two weeks from now. However, I'm facing an issue with adjusting the highlight if either of these days falls on a holiday. Curr ...

javascripthtmlcssangularjsweb-applications

The absence of a datepicker in Bootstrap has become glaringly obvious

My form includes a single date input using <input type='date' class='form-control'>. When utilizing the form-control feature from Bootstrap 5, the default white color is applied to the date picker, matching the rest of the form. ...

htmlcssbootstrap-5

Instructions on creating a number increment animation resembling Twitter's post engagement counter

I've been attempting to replicate the animation seen on Twitter's post like counter (the flipping numbers effect that happens when you like a post). Despite my best efforts, I can't seem to make it work. Here is what I have tried: $(fun ...

javascripthtmljquerycss

Ways to insert additional panels prior to and after a selected panel

A button is provided in the report designer detail band that, when clicked, should add new panels immediately before and after the detail panel. $parentpanel = $this.parents(".designer-panel:first"); This code snippet is used to locate the parent panel u ...

javascriptjqueryhtmlcss

Personalized element IDs and unique CSS styles

After editing the code snippet below... <div id="rt-utility"><div class="rt-block fp-roksprocket-grids-utility title5 jmoddiv"> I applied the changes in my custom.css file like this: #rt-utility .rt-block {CODE HERE} However, when attemptin ...

css

Iterating through two classes in a Javascript loop

Hello, I'm facing a small obstacle that I'm hoping to overcome using JavaScript/jquery. Essentially, I have multiple div classes and I want to create a loop that adds a class to specific divs without manually assigning an id to each one. The goal ...

javascriptjqueryhtmlcss

Unlinked Checkbox in Angular Bootstrap Modal Controller

I am currently utilizing the modal feature from Bootstrap 3's Angular fork, and I am facing an issue with using a checkbox within the modal and retrieving its value in my main controller. The checkbox value is properly bound in the view but not in th ...

javascriptangularjstwitter-bootstrap

Position the text in the exact center of an HTML element using absolute positioning

Hey there! I am currently working on a website and I'm trying to create a simple delete button that can be used throughout the site. However, I'm having trouble getting it positioned correctly... Here's what I have so far: <button id="c ...

htmlcss

Steps to configuring reverse gradient in a solitary line

I have successfully resolved similar issues with diagonal gradients in the past. However, I am currently facing challenges with linear gradients. Previously, I was able to create a gradient with a cross pattern. background: linear-gradient(to right, tran ...

htmlcssgradientlinear-gradients

Position an image in the center of a column using the Ionic grid

I'm currently working on using the Ionic grid to create a menu layout for my app, but I'm facing an issue with the image sizes not adjusting and their alignment inside the columns not being centered. https://i.sstatic.net/yWjCV.png Below is the ...

htmlcssangularjsionic-framework

inadequately arranged in a line

In Bootstrap 4, I have created this form group that you can view in this fiddle: <div class="m-portlet__body"> <div class="form-group m-form__group row"> <label class="col-lg-2 col-form-label"> Email Address ...

cssbootstrap-4

Utilizing CSS3 webkit-transitions with multiple properties on a div element along with multiple webkit-transition-delays

Is there a way to make a div slide 200px to the right and then reduce its scale by half separately? I want it to slide first and then scale, but currently both transformations happen simultaneously. I tried using webkit-transition-delay to set different ...

csswebkit

Navigating through a list of items using keyboard shortcuts in HTML

Similar Question: KeyBoard Navigation for menu using jquery I have developed a menu using unordered list items and display it when the user presses the Enter key in the textbox. While the user can navigate through the menu using the mouse to select it ...

jqueryhtmlcssnavigationcontextmenu

attempting to display an element using jQuery that belongs to the identical class

I have multiple buttons with the class .modif, each with a different title attribute such as title="one". All these buttons are associated with boxes that share the class .box_slide. However, I am trying to display only the box that also has the additional ...

jquerycss

Troubleshooting: .NET 6 compatibility issue with Bootstrap theme - tips for resolving

NOTE 2: Watch out for the visual studio IDE auto-filling the CSS initialization, as my issue was resolved in the comment section of the question NOTE: I have confirmed that I have the most recent bootstrap package installed from the manager matching the t ...

cssasp.net.net-corebootstrap-5

increase the margin size in bootstrap 4

Currently, I am working with Bootstrap 4 and Sass (scss file) and am trying to incorporate the properties of the .mx-2 class into a new custom class. I attempted to do so as follows: .MyCustomClass{ @extend .mx-2; } However, it seems that the compiler ...

sassbootstrap-4

CSS for leaving white space at the end of one third of a container

Currently developing a website and facing an issue with the layout: I am trying to create 3 columns of equal height with each column taking up one-third of the width. However, there seems to be a small white gap on the right side of the last column. Here ...

htmlcss

Set up two separate tables with sufficient space in between each other

Is there a way to align these two tables next to each other with some space between them? Currently, they appear one below the other. How can I make them sit beside each other with spacing in between? If anyone knows how to do this, please help me out. &l ...

htmlcsshtml-table

Bootstrap Containers Misaligned

I have been developing a website with two containers, one on the left and one on the right. By executing the following HTML code, you can see the structure: <!DOCTYPE html> <html lang="en"> <head> <link rel=& ...

htmlcssbootstrap-5