Arranging an image and button within a column div row using Bootstrap

I'm encountering an issue with Bootstrap where I am trying to align the blue buttons neatly below the image.

Link to the image: img

Here is a visual representation: https://i.sstatic.net/tB5mU.png

This is the code snippet:

<div class="row">
<div class="col">
    <input id="InputFile1" type="file" accept="image/*" onchange="loadFile(event, 'output1', 'spanIMG1')" hidden>
    <img id="output1" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
    <a class="btn btn-info" style="width: 135px;" href="javascript:{}">First Image</a>
</div>
<div class="col">
    <input id="InputFile2" type="file" accept="image/*" onchange="loadFile(event, 'output2', 'spanIMG2')" hidden>
    <img id="output2" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
    <a class="btn btn-info" style="width: 135px;" href="javascript:{}">Second Image</a>
</div>
<div class="col">
    <input id="InputFile3" type="file" accept="image/*" onchange="loadFile(event, 'output3', 'spanIMG3')" hidden>
    <img id="output3" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
    <a class="btn btn-info" style="width: 135px;" href="javascript:{}">Third Image</a>
</div>
htmlcssbootstrap-4

Answer №1

Here's a helpful tip: include the class d-flex flex-column in each .col element, and then assign the mx-auto class to every child within that column.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abc9c4c4dfd8dfd9cadbeb9f859d859a">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="row">
  <div class="col d-flex flex-column">
    <input class="mx-auto" id="InputFile1" type="file" accept="image/*" onchange="loadFile(event, 'output1', 'spanIMG1')" hidden>
    <img class="mx-auto rounded" id="output1" style="height: 135px; width: 135px;" src="https://media.istockphoto.com/vectors/image-preview-icon-picture-placeholder-for-website-or-uiux-design-vector-id1222357475?k=20&m=1222357475&s=612x612&w=0&h=jPhUdbj_7nWHUp0dsKRf4DMGaHiC16kg_FSjRRGoZEI=">
    <a class="btn btn-info mx-auto mt-1" style="width: 135px;" href="javascript:{}">First Image</a>
  </div>
  <div class="col d-flex flex-column">
    <input class="mx-auto" id="InputFile2" type="file" accept="image/*" onchange="loadFile(event, 'output2', 'spanIMG2')" hidden>
    <img class="mx-auto rounded" id="output2" style="height: 135px; width: 135px;" src="https://media.istockphoto.com/vectors/image-preview-icon-picture-placeholder-for-website-or-uiux-design-vector-id1222357475?k=20&m=1222357475&s=612x612&w=0&h=jPhUdbj_7nWHUp0dsKRf4DMGaHiC16kg_FSjRRGoZEI=">
    <a class="btn btn-info mx-auto mt-1" style="width: 135px;" href="javascript:{}">Second Image</a>
  </div>
  <div class="col d-flex flex-column">
    <input class="mx-auto" id="InputFile3" type="file" accept="image/*" onchange="loadFile(event, 'output3', 'spanIMG3')" hidden>
    <img class="mx-auto rounded" id="output3" style="height: 135px; width: 135px;" src="https://media.istockphoto.com/vectors/image-preview-icon-picture-placeholder-for-website-or-uiux-design-vector-id1222357475?k=20&m=1222357475&s=612x612&w=0&h=jPhUdbj_7nWHUp0dsKRf4DMGaHiC16kg_FSjRRGoZEI=">
    <a class="btn btn-info mx-auto mt-1" style="width: 135px;" href="javascript:{}">Third Image</a>
  </div>
</div>

Answer №2

Check out this helpful tutorial on the grid system in bootstrap:

To set up your layout, create two rows - one for images and the other for links:

<div class="row">
  <div class="col">
    <input id="InputFile1" type="file" accept="image/*" onchange="loadFile(event, 'output1', 'spanIMG1')" hidden>
    <img id="output1" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
  </div>

  <div class="col">
    <input id="InputFile2" type="file" accept="image/*" onchange="loadFile(event, 'output2', 'spanIMG2')" hidden>
    <img id="output2" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
  </div>

  <div class="col">
    <input id="InputFile3" type="file" accept="image/*" onchange="loadFile(event, 'output3', 'spanIMG3')" hidden>
    <img id="output3" style="height: 135px; width: 135px;" src="../Images/noIMG.jpg">
  </div>
</div>

<div class="row">
  <div class="col">
    <a class="btn btn-info" style="width: 135px;" href="javascript:{}">First Image</a>
  </div>

  <div class="col">
    <a class="btn btn-info" style="width: 135px;" href="javascript:{}">Second Image</a>
  </div>

  <div class="col">
    <a class="btn btn-info" style="width: 135px;" href="javascript:{}">Third Image</a>
  </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

Rearranging anchor tag order with the power of JQuery

Imagine I have five anchor tags <a id = "A" class = "Home">Home</a> <a id = "B" class = "Maps">Maps</a> <a id = "C" class = "Plans">Plans</a> <a id = "D" class = "Community">Community</a> <a id = "E" clas ...

javascriptjqueryhtmlcss

Styling Descendants Conditionally in Angular 2

.parent { color: blue; } .parent * { color: red; } .child { color: black; } .grandchild { color: green; } <div class="parent"> Parent <div>Child <div>GrandChild</div> </div> </div> Imagine a scenari ...

cssangularng-classng-style

Guide to automatically update div with new table rows with the help of Ajax

Can you assist me in updating the div called "table" that contains a table fetching rows from the database? <div id="table"> <h1 id="Requests"> <table></table> </h1> </div> <button id="refresh-btn"&g ...

javascriptjqueryhtmlajax

Ways to achieve a blurred background effect on the body using CSS

I've been experimenting with setting a background color using linear gradient, but now I want to add a blur effect to it. I've tried various codes but haven't had any success so far. Here is the CSS code I have been working on: body{ ...

css

Ways to transfer data from TypeScript to CSS within Angular 6

Trying to work with ngClass or ngStyle, but I'm struggling with passing the value. Here's my current code: strip.component.ts import { ... } from '@angular/core'; @Component({ selector: 'app-strip', templateUrl: &apo ...

htmlcssangulartypescript

Horizontal Alignment of DIV Tags

I'm currently working on aligning some div tags to serve as contact links on my website. My goal is for them to be positioned on the right-hand side and aligned in a single line. Here's how they look at the moment: https://i.sstatic.net/rQ1uG.p ...

htmlcsstext-alignment

Error message: Unhandled error - $(...).sidr does not exist as a function. [Chrome developer console]

I included this code in the basic module HTML block of a WordPress page builder and encountered the white screen of death. According to the Chrome developer console, the following error occurred: helpers.js?ver=4.5.3:15 Uncaught TypeError: $(...).sidr is ...

javascriptjqueryhtmlcsswordpress

The file type input is not directing to the correct folder in Internet Explorer version 9

Could someone please assist me with this problem in IE9? After I select a file to upload, then choose another one, it shows "fakepath" in IE9. See the image below for more information: https://i.sstatic.net/QsJFk.png https://i.sstatic.net/3nWRC.png htt ...

javascriptjqueryhtmlcss

The Bootstrap popup fails to display when adding the bootstrap.min.css file

I am experiencing difficulties with CSS as I am relatively new to it. Currently, I am utilizing the bootstrap popup in the following example. Upon clicking the 'Full Spec' button, a popup box appears. However, it seems that the file bootstrap.mi ...

htmlcsstwitter-bootstrappopup

Changing or toggling the visibility of links once the week is finished

I have a total of 4 links available, but I want to display only one link at a time, highlighting a different lunch option every week. Once all 4 weeks have passed, the first lunch menu will be shown again, starting from Monday. <div class="wrapper& ...

javascripthtmljqueryswitching

Issues have been reported regarding compatibility between iOS7, jquery.touchSwipe, on click and webkit-touch-callout

I'm in the process of developing a web application, but I've encountered an issue with iOS7 where there seems to be a conflict between jquery.touchSwipe and my "on click" events. Interestingly, the web app functions perfectly on older iOS versio ...

jqueryhtmlcssios7

Expanding a website banner slide to fill the entire width of the page

Is there a way to ensure that the banner images in the website below flow seamlessly? Currently, it seems like the current image is cut off on the left and part of the previous image shows up in its place. I'd like the current image to occupy the ent ...

javascripthtmlcssajaxtemplates

Learn how to display a "not found" message in a React.js application

I have a piece of code where I am sending a post request to an API and retrieving all the data from the API in a table. I am trying to find currency data based on the currency name, if found I display the data in a div, if not found I want to print "not ...

javascripthtmlreactjs

npm installation for phonegap failed due to shasum check discrepancy

I've attempted numerous times, but I keep encountering this error (shasum check failed) 4784 error Error: shasum check failed for C:\Users\FENGXI~1\AppData\Local\Temp\npm-7004-QbpFFte5\1387269030233-0.28223602287471 ...

htmlnode.jscordovanpm

Main content with a floating aside menu

I am currently using the CoreUI admin template. The layout I have set up is the basic one outlined on the following page: My goal is to make the aside menu appear on the right side of the main content, floating over it rather than inline and reducing the ...

htmlcsstwitter-bootstrapcore-ui

Identifying and categorizing flip switches with jQuery without relying on div elements

Is it possible to have two jQuery flip switches side by side, but only one visible if the screen is too narrow? I've tried assigning different classes to each switch for styling purposes, but it doesn't seem to work correctly. When I assign a cl ...

jqueryhtml

Challenges with Bootstrap positioning in the content

I am relatively new to the world of HTML/CSS/Bootstrap, but I am eager to learn and eventually incorporate JavaScript for an idle game project. The challenge I'm facing is aligning my content next to the navigation bar under the "Welcome Back" headin ...

bootstrap-4bootstrap-5

extract element from a string with the help of jquery

When using AJAX to request HTML from a page, the process involves sending a request like this: function getHTML() { //set ajax call var options = { url: '/Controller', type: 'GET', d ...

javascriptjqueryhtmlajaxtypes

incorporate partial html into nodeJS & Jade using AJAX requests

Is there a smart method to load just a segment of a page using Node.js and Jade?: I'm in the process of creating a music blog and I want to incorporate a seamless player at the top of each page. The goal is for the player to keep playing without inte ...

htmlnode.jspug

Tips for adjusting the placeholder color in Material UI using React JS

Is there a way to customize the background color and flashing color of the Skeleton component in Material UI? I would like to implement custom styling for it, similar to what is shown below: <Skeleton variant="circle" classes={{root:'pla ...

javascriptcssreactjsmaterial-ui