Creating Bootstrap columns with equal height and a button

My HTML Code looks like this:

<div class="row align-items-center" style="margin: 0; padding: 0;">
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <a href="#"><button style="width: 100%;">Test</button></a>
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="resources/assets/images/square-test.png">
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="resources/assets/images/square-test.png">
   <div>
</div>

This is how it currently appears...

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

I am trying to ensure that the button height matches the other columns' width. Width 100% works fine, but what about the height?

htmlcssbootstrap-4

Answer №1

Kindly take note that buttons cannot be nested within links and vice versa

To resolve this issue, simply remove the align-items-center class and adjust the button height to 100%:

.col-4 button {
  height:100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="margin: 0; padding: 0;">
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
     <button style="width: 100%;">Test</button>
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="http://www.fillmurray.com/284/196">
   </div>
   <div class="col-4" style="background-color: red; margin: 0; padding: 2px;">
      <img style="width: 100%;" src="http://www.fillmurray.com/284/196">
   <div>
</div>

Answer №2

I made an adjustment to the styling by eliminating the need for passing classes with bootstrap. Here is the revised code:

<div class="row align-items-center m-0 p-0">
   <div class="col-4 bg-danger m-0 p-1">
      <a href="#"><button class="btn btn-dark w-100 h-100>Test</button></a>
   </div>
   <div class="col-4 bg-danger m-0 p-1">
      <img class="w-100" src="resources/assets/images/square-test.png">
   </div>
   <div class="col-4 bg-danger m-0 p-1">
      <img class="w-100" src="resources/assets/images/square-test.png">
   <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

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

What is the best way to apply a background-image to a DIV while also implementing a double line border to prevent the image from showing through the border?

Within my DIV, I have applied a background-image and added a double border to the DIV. The image is currently visible in between the lines. Is there a method to resolve this issue and prevent the image from displaying in this manner? ...

cssborder

It may display a user, but it reveals all users on the table to me, and I am specifically seeking one with $_session

I am looking to display specific user information using a $_session variable. Currently, I have it working with a table format but I want to avoid using a table and instead use a CSS div. However, when I tested this, I encountered an error message saying " ...

phphtmlmysql

When you click on a main category, a list of its corresponding subcategories will

concept image My vision involves having users click on a category from the top menu to display all main cards (parent cards), and then further clicking on a parent card will unveil its corresponding child cards. I've even included an image to help v ...

javascripthtmljquerybootstrap-5

Guide on how to have two controllers execute identical tasks in Angular while modifying the appearance of the website

Trying to recreate Google's homepage functionality using Angular has been challenging for me. Despite watching Egghead videos and studying the API extensively, I couldn't find a specific example for this behavior. Here's what I aim to achiev ...

javascripthtmlangularjssingle-page-application

Is there a way to shift my navigation to the right while keeping the (display: inline;) property intact?

Is there a way to align my navbar to the right side while keeping the display: inline; property intact? When I remove the display: inline; property, the li elements automatically align to the right side of the page, but in a list format. HTML <div id= ...

htmlcss

Unable to align text within a DIV using CSS

Recently, I started learning jQuery and building my own website. You can find my project on JSFIDDLE. The issue I'm facing is that when hovering over a new div, the text extends beyond the borders of that div instead of staying within it. I've sp ...

javascriptjqueryhtmlcss

Animate photos with identical class names individually using CSS

Check out this snippet: <img class='img-logo' src={logo} alt="Logo" /> <img class='img-logo' src={logo} alt="Logo" /> <img class='img-logo' src={logo} alt="Logo" /> <img class ...

htmlcss

"Encountering difficulties in dynamically populating a dropdown menu with ng-options in Angular

In my web application, I have a table displaying user information. Below the table, there is an input box where users can enter the row index. Based on this row index, I am dynamically populating an object using ng-options. Here is a snapshot of the HTML ...

htmlangularjs

Apply CSS styles from a text area using v-html

I am currently working on developing a unique WYSIWYG application where users have the ability to write CSS in a textarea field and view its direct impact on the HTML content displayed on the page. As I was experimenting with different approaches, I attemp ...

javascriptcssvue.jswysiwyg

The combination of Bootstrap and Django does not support responsive design

My code is not working correctly, and I'm struggling to identify the errors. The website I'm working on has subpages, but the responsive design doesn't seem to be functioning properly. Could this issue be related to mistakes in my HTML/CSS c ...

htmlcssdjangobootstrap-4responsive-design

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

Tips for modifying the appearance of this input document

Hey there, I have this input element created in React: <span className="btn-file" type='button'> <div style={{display:'flex',justifyContent:'space-around'}}> <span style ...

htmlcssreactjs

Adding or removing a class on hover in Tailwind: The simple way!

Is there a way to change the class upon hovering an object using tailwind classes? <span className='group inline-block relative'> Hello <span className='hidden absolute -top-16 left-16 group-hover:inline-block'>&#45; ...

jquerycsshovertailwind-csshidden

Showing the date object in a react component

As a new programmer, I decided to start with React hooks based on recommendations that it's easier to learn. However, I encountered an issue when trying to display the deliveryDate on the screen. React doesn't seem to accept objects as children, ...

javascripthtmlreactjstypescript

What is the best way to ensure that two div elements within a list element fully utilize the available width on a webpage?

I am looking to create a 'settings' div that adjusts its width based on the available space on a page. This could range from 1000px to 600px, and I want the div to always be next to the 'title' div without wrapping onto the next line. F ...

htmlcsswidthhtml-lists

Incorporate a span element within the PHP code located in the final div

Having trouble with adding a span in PHP The last div is not functioning correctly. **In need of help on how to insert a span within PHP code.** echo" <tr> <td>$id</td> <td>$name</td> <td>$la ...

phphtmlcss

Access an HTML file in Text Edit on a Mac directly from a web browser

Is there a way to utilize Javascript or another appropriate script to open an HTML file in Text Edit on my Mac? I have created a local web page using Text Edit that has different tabs linking to other Text Edit files within the page. I am looking for a m ...

javascripthtmlmacosedittextedit

Creating a toggle label using just CSS: a step-by-step guide

Recently, I was trying to create a toggle label using HTML, CSS, and JavaScript. Here is the code snippet that I experimented with: function genre_itemclick(item){ if(item.classList.contains('light_blue_border_button')) { ...

javascripthtmlcss

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss