What is the best way to align buttons and text using bootstrap?

Having an issue with misaligned text and buttons on my HTML page that is using Bootstrap. How can I align the buttons, image, and text properly?

https://i.sstatic.net/6F9Z9.png

<!doctype html>
    <html>
    <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</script>
    <meta charset="utf-8">
    <title>prueba</title>
    </head>
    <body>
        <section id="explora nuestra gama"> <!-- EXPLORA NUESTRA GAMA -->
      <div class="container text-center py-5">
        <h2> EXPLORA NUESTRA GAMA</h2>
        <div class="row py-5 justify-content-center">
          <div class="col-12 col-md-4"> <!-- CARRO 1 -->
            <figure> <img class="figure-img img-fluid rounded" src="https://i.imgur.com/45aQm0Z.jpg" width="300" height="120" alt="suv"/> </figure>         
            <h3>SUV</h3>
            <p> <a class="btn btn-dark" href="suv.html">Ver más</a></p> 
          </div>
          <div class="col-12 col-md-4"> <!-- CARRO 2 -->
            <figure> <img class="img-fluid" src="https://imgur.com/sqzKd7t.jpg" width="300" height="120" alt="pasajero"/> </figure>
            <h3>VEHÍCULO DE PASAJEROS</h3>
            <p> <a class="btn btn-dark" href="#">Ver más</a></p>
          </div>
          <div class="col-12 col-md-4"><!-- CARRO 3 -->
            <figure> <img class="img.fluid" src="https://imgur.com/RDPnADx.jpg" width="300" height="120" alt="comercial"/> </figure>
            <h3>COMERCIAL</h3>
            <p> <a class="btn btn-dark" href="comercial.html">Ver más</a></p>
              </div>  
        </div>
        <div class="col py-4"> <!-- boton y pagina de salida -->
          <p> <a class="btn btn-dark" href="simulador.html">SIMULA TU CUOTA MENSUAL AQUÍ</a></p>
        </div>
      </div>
    </section>
    </body>
    </html>
htmlcssbootstrap-4

Answer №1

To reverse the order of appearance of elements inside each div in bootstrap, you can utilize d-flex flex-column-reverse. This will ensure that buttons always align together as they are displayed above the bottom of the div. See the code snippet below for a demonstration:

<html>

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  </script>
  <meta charset="utf-8">
  <title>prueba</title>
</head>

<body>
  <section id="explora nuestra gama">
    <!-- EXPLORA NUESTRA GAMA -->
    <div class="container text-center py-5">
      <h2> EXPLORA NUESTRA GAMA</h2>
      <div class="row py-5 justify-content-center">
        <div class="col-12 col-md-4 d-flex flex-column-reverse">
          <!-- CARRO 1 -->
          <p> <a class="btn btn-dark" href="suv.html">Ver más</a></p>
          <h3>SUV</h3>
          <figure> <img class="figure-img img-fluid rounded" src="https://i.imgur.com/45aQm0Z.jpg" width="300" height="120" alt="suv" /> </figure>
        </div>
        <div class="col-12 col-md-4 d-flex flex-column-reverse">
          <!-- CARRO 2 -->

          <p> <a class="btn btn-dark" href="#">Ver más</a></p>
          <h3>VEHÍCULO DE PASAJEROS</h3>

          <figure> <img class="img-fluid" src="https://imgur.com/sqzKd7t.jpg" width="300" height="120" alt="pasajero" /> </figure>
        </div>
        <div class="col-12 col-md-4 d-flex flex-column-reverse">
          <!-- CARRO 3 -->

          <p> <a class="btn btn-dark" href="comercial.html">Ver más</a></p>
          <h3>COMERCIAL</h3>
          <figure> <img class="img.fluid" src="https://imgur.com/RDPnADx.jpg" width="300" height="120" alt="comercial" /> </figure>
        </div>
      </div>
      <div class="col py-4">
        <!-- boton y pagina de salida -->
        <p> <a class="btn btn-dark" href="simulador.html">SIMULA TU CUOTA MENSUAL AQUÍ</a></p>
      </div>
    </div>
  </section>
</body>

</html>

Answer №2

To create space between the image and text for alignment, try using flexbox. This will ensure that the text aligns at the bottom or any other desired position.

<div class="col-12 col-md-4 d-flex justify-content-between">
    <figure>
        <img class="figure-img img-fluid rounded" src="https://i.imgur.com/45aQm0Z.jpg" width="300" height="120" alt="suv"/>
    </figure>
    <div class="mb-3">
        <h3>SUV</h3>
        <p>
            <a class="btn btn-dark" href="suv.html">Ver más</a>
        </p>
    </div>
</div>

The class="mb-3" allows you to specify the margin between the text and bottom of the container.

Answer №3

In this particular section of the code snippet:

<figure>
  <img class="figure-img img-fluid rounded" src="https://i.imgur.com/45aQm0Z.jpg" width="300" height="120" alt="suv" />
</figure>

The class .figure-img has a defined style property of margin-bottom: .5rem;, which is not consistently applied to all elements. To achieve uniformity, either remove it or extend it to the other relevant elements.

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

The feature in Chrome that automatically reloads generated CSS is failing to refresh the page after SASS recompiles the CSS

I'm attempting to set up Chrome's DevTools to automatically reload a page when I save changes to a watched SCSS file that compiles and updates the CSS file. Although I have checked the Auto-reload generated CSS option, it is unfortunately not fu ...

htmlcssgoogle-chromesass

Organize your blog content by utilizing post IDs as the designated id attribute

What is the best way to format blog posts and comments in HTML so that I can easily manipulate them later using jQuery/Javascript for tasks like updating, deleting, or making Ajax calls? I am considering using the IDs (primary keys in the database) of the ...

javascriptjqueryhtmlajax

I am unable to display the service response in the Angular component

I'm facing an issue with displaying data in an angular component from a service. The process from the service to the component seems fine, but when I try to use the variable in HTML, it doesn't show the result. For this project, I am using the M ...

javascripthtmlangulartypescriptmetronic

Using the radius to determine the center point of the circle

<span class="qs">Q{{i + 1}} <a href="#question-view"></a></span> <div class="tooltipp text-center bubble[ngStyle]="bubbleStyle(prof?.proficiencyBrightness, prof?.proficiencyRadius)"> </div> In the illustration below, ...

htmlcssbootstrap-4

No departure animation employed - Polymer

I am working on a project that involves animating a paper-icon-button with spin and opacity effects when hovering over an image using the on-mouseenter and on-mouseleave events. Everything works smoothly when hovering over the image, but I am facing an is ...

javascripthtmlcssanimation

Craft a circular design with an Arc and a Pie using the DIV DOM element

After creating an ellipse using the div DOM element, here's how I did it: var body = document.querySelector('body'); var div = document.createElement('div'); div.style.borderRadius = '50%'; div.style.border = '1px s ...

javascripthtmlcss

Is there a way to temporarily halt a CSS animation when it reaches the final frame

Can anyone assist me with getting the "-webkit-animation-fill-mode: forwards;" to work? It seems like it's getting stuck on the first frame, and I can't figure out why. JS FIDDLE <div class="logo"></div> .logo { width: 328px; ...

csscss-animations

What is the process for obtaining the Rails response object within your code?

Is there a way to manipulate the response object from a controller in Rails? I have an example of how to access the response: class HomeController < ApplicationController after_filter :generate_html def index end def generate_html raise ...

htmlruby-on-railsstatic-pages

Stopping the spread of popup alerts: A comprehensive guide

I'm having trouble explaining this in English;-) Whenever I select an option, an alert pops up for each choice and I don't know how to stop it. Step 1: Choose the "aaaa" option, for example 1111 alert ... Step 2: Choose the "bbbb" option, for ...

javascriptjqueryhtml

How can I retrieve the contents of input fields and showcase them in a dialog box?

<dialog> label id="show" label label id="show1" label </dialog> var x = document.getElementById("name").value; x = document.getElementById("show").innerHTML; var y = document.getElementById("matrix").value; y = document.getElementById("sho ...

javascripthtml

Change the background color on hover without affecting the text color

I am having some trouble with my code. I can only change the color of the "popup1_btn" button when hovering, but the text color remains the same. If I use .popup1_btn a:hover, it only changes the background and text color of the text, not the entire button ...

htmlcss

Create a layout with three columns, each containing four list items

My unordered list (ul) has 4 li's and I'm trying to create 3 columns. However, when I have 4 li's, it only displays as 2 columns. How can I achieve a layout with 3 columns and 4 li's? Additionally, I want the li elements to be arranged ...

htmlcss

Tips for repositioning the color picker

Here's a straightforward example where I'm looking to adjust the location of the color picker so that it aligns with the button. function changeColor() { document.getElementById('test').click(); } <div> <h1> Colo ...

javascripthtmlangular

What is the best way to eliminate the <br> element from an array using PHP?

I have an array named $error_msg with the following content: Please select at least 1 question issue<br>This question has been already reported<br> Now I am converting this array into JSON format using the code below: $response_data = ar ...

phphtmlarraysjsonline-breaks

Opt for the modal class over the id for improved functionality

How can I use this modal multiple times on the same page when it only works once due to the id element? Can someone assist me in making it work multiple times on the same page? I have tried the following code, but when I click the button, nothing happens. ...

javascripthtmljquerymodal-dialog

Neglecting the focus on click events in jQuery

I recently created a webpage with multiple elements that have the contenteditable property enabled. To enhance user experience, I implemented a feature where the text in each element is automatically selected when tabbing to it, thanks to a helpful plug-in ...

jqueryhtml

Issues with HTML rendering text

Having trouble with text display on my website. It seems to vary based on screen resolution, but I can't figure out why. Any insights on what might be causing this issue? Check out the source code here <body> <div id="navwrap"> < ...

htmlcsstextresolution

How can I prevent an InnerText from being empty in an If statement with PHP?

I need assistance with skipping empty InnerText and assigning a default value in my code. Here is the code snippet: if (strip_tags($result[$c]->innertext) == '') { $c++; continue; } Below is the output: https://i.stack. ...

phphtmlsimple-html-dom

CSS - Utilize floating divs to dynamically populate empty spaces

I am currently working on creating a grid layout on my website, . Despite using multiple divs (images) with the float: left; property, I am noticing empty spaces and gaps that are not being filled by the floating divs. Thank you in advance for any assist ...

csscss-floathtmljquery-isotope

Does Less undergo a compilation process in a single pass?

Does Less execute a single pass on the files, or does it perform multiple passes? I am particularly worried about what will happen if I include another file that redefines variables and mixins. Will the generated output use the original values, or will it ...

cssless