What's the best way to ensure that Bootstrap columns have consistent height with space in between?

Looking to create three columns of equal height in Bootstrap, with no gaps between them? Check out this screenshot for reference:
Screenshot

Below is the code snippet you can use:

<div class="container">
  <div class="row mt-4">
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-laptop-code fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Development</h5>
        <p>I offer customized Web Development services.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-palette fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Web Design</h5>
        <p>Get top-notch Modern Web App Designs for your site.</p>
      </div>
    </div>
    <div class="col-12 col-md-6 col-xl-4 service mt-4">
      <div class="p-3">
        <div class="icon">
          <i class="fa-solid fa-mobile-screen-button fs-1"></i>
        </div>
        <h5 class="mb-4 mt-2">Responsive Design</h5>
        <p>Achieve full Responsive Design with Bootstrap or Media Queries.</p>
        </div>
      </div>
    </div>
  </div>

For some custom styling, use this CSS snippet:

.p-3{
  text-align: center;
  background: #202020;
  border-radius: 10px;
}
htmlcssresponsive-designbootstrap-5

Answer №1

To resolve the issue, simply include height: 100% in the p-3 class.

Adjust the CSS as follows;

.p-3{
  height: 100%;       //ensure to include this line
  text-align: center;
  background: #202020;
  border-radius: 10px;
}

Answer №2

html

<article id="myWrapper">
        <section class="col-md-12">
            <div class="col-md-4" id="myBox">
                <div id= "myPanel">
                    this is my box
                </div>
            </div>
            <div class="col-md-4" id="myBox">
                <div id= "myPanel">
                    this is my box
                </div>
            </div>
            <div class="col-md-4" id="myBox">
                <div id= "myPanel">
                    this is my box
                </div>
            </div>
        </section>
    </article>

css

#myWrapper{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    justify-content: center;
}
#myBox{
    display:flex;
    align-items: center;
    justify-content: center;
}
#myPanel{
    height:100px;
    width:200px;
    background-color: blue;
    height:300px;
    width:95%;
}

Answer №3

Give this a shot

.row>div {
  display: grid;
}

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

"Tips for stopping users from using Ctrl+U to view page source in

Is there a way to prevent users from viewing the source code (HTML + JavaScript) of a page by disabling Ctrl+U in the browser? ...

javascriptphpjqueryhtml

How to position and center a div layer over another div

I have been struggling to place a div over another div that contains an image. The div needs to have a simple HTML link just like the example shown in this picture: However, when the page loads, the URL is not centered on the image as you can see on the l ...

csshtmlalignment

Display Text Aligned in the Middle Beside Website's Logo

Newbie to HTML and CSS here! I'm attempting to achieve a design similar to this: https://i.sstatic.net/HyiP3.jpg Below is my code snippet: <div id="topbar"> <div class="image"> <img src="images/ghwlogo.png"> </ ...

htmlcss

Incorrect rendering on mobile screen width

I am facing an issue where my div does not display as 100% width in the mobile version. Below is the JSX code I am using: <div> <div expand="lg" className="login-header"> <h1>logo</h1> <h1&g ...

htmlcssmobileviewportmeta

Utilize the HTML img tag in conjunction with AngularJS and Ionic to showcase dynamic images

Currently, I am working on a hybrid mobile app using ionic and Angularjs. I am facing an issue with displaying images through the img html tag in my app. The main layout of my page includes a carousel at the top that displays images and a list containing s ...

javascriptjqueryhtmlangularjs

Identify and apply a special effect to the initial input element within a popup using jQuery

I have a variety of popups containing multiple input fields. I am aiming to emphasize the initial input element of each of my popups, without the utilization of ids: This is my current code snippet: function initializePopups(){ $('*[id*=Popup]&a ...

javascriptjqueryhtmljquery-mobile

Placing Google Adsense among the content created using a JQuery loop

I have implemented a search function on my website that retrieves results from the database in JSON format. These results are then dynamically displayed by appending a DIV or SPAN element within a loop. $("#btnGetresult" ).click(function(e) { var ...

javascriptjqueryhtmladsense

Disabling an HTML attribute on a button prevents the ability to click on it

In my React application, I have a button component that looks like this: <button onClick={() =>alert('hi')} disabled={true}>test</button> When I removed the disabled attribute from the browser like so: <button disabled>test& ...

javascripthtmlreactjs

Bootstrap creates an element positioned at the end of the row

I am currently utilizing the Bootstrap framework and I'm facing a challenge where I need an element positioned at the end of a row. <div class="row"> <div>div 1</div> <div>div end</div> </div> These divs a ...

cssbootstrap-4

What steps should I take to repair this array table?

I've created a simple array table that uses 3 user-defined values to determine the value of a variable. Although I've written similar code in the past, I'm having trouble figuring out why this one isn't working. The table is quite large ...

javascripthtmlarraysvariables

The position of the mouse on the canvas following a CSS scaling

I'm currently working on finding the mouse coordinates on an HTML5 canvas element. I set the canvas dimensions to 700x700. When I hover over the canvas, I aim to retrieve the X,Y coordinates of the mouse. Everything goes smoothly until I resize the c ...

javascriptcsshtmlcanvas

Close the Bootstrap burger menu after clicking on a scrollspy link

Is there a way to automatically collapse the Bootstrap burger menu when clicking on a scrollspy link? While browsing my website on a mobile device, the Bootstrap navigation menu switches to a burger icon. However, when you click on an internal link that l ...

javascripthtmljquerycssbootstrap-5

I am currently facing an issue with retrieving the class value that is being generated by PHP code

I am currently facing an issue with jQuery and PHP. Whenever I attempt to target the click event on the class ".id_annonce" in the dynamically generated PHP code, it doesn't retrieve the exact value of what I clicked. Instead, it always gives me a fi ...

javascriptphpjqueryhtmlajax

Strange issue with redirecting (POST request redirect to current page not working)

I have a POST request that always sets the location in the response header to redirect back to the same page. 1) When I click sign in, the location is set to /, which is the current page. The server handles the request and then issues a redirect through t ...

htmlnode.jshttphttp-redirecthttp-headers

Strange image movement occurs when utilizing jQuery slideDown and slideUp

My HTML structure is as follows: <div class ='profileName'> <hr> <span class='name'>Content</span> </div> <div class ='profile'> <div class='floatRightImg padded'> < ...

jqueryhtml

Generating a clickable link from information pulled from a database and utilizing the get() method

Currently experimenting with a form I created and everything is functioning smoothly. My current objective involves retrieving specific rows from my database and presenting them as a summary on a separate page. However, I want these rows to appear as hyper ...

phphtmlmysqli

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option. In my case, I have several sortable lists that are connected within separate c ...

javascriptjqueryhtmlcssjquery-ui

Allow JavaScript to determine whether to link to an internal or external web address

Currently, I am in the process of setting up a new website and need to create an HTML page with some JavaScript that can determine whether to link to the external or internal IP address. I have researched some JavaScript code to fetch the IP address, whic ...

javascripthtmlnetworking

Choose the ngModel option from the dropdown menu

I have a project where I need the first question from a list to be displayed automatically. I found an example of how to do this using the index, like so: <select> <option *ngFor="let answer of answers; let i = index" [value]="answer.id" [selec ...

javascripthtmlangularangular-ngmodelangular2-ngmodel

Expanding the input range slider to fill the entire available space

https://jsfiddle.net/a5gdhmfn/1/ <div> <i>O</i> <input type="range" /> <button/> <div>...</div> </div> Inside a div, there is a range slider along with other fixed-width elements. The issue ...

htmlcss