CODEWITHSUNDEEP
htmlcssbootstrap-4
Diogo Carvalho
Diogo Carvalho

Reputation: 73

img and button placing bootstrap inside a colum div row

I have a problem using bootstrap, I want to make that the blue buttons stay nicely underneath that picture.

the no img link: img

This is how it looks like: enter image description here

This is my code:

<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>

Upvotes: 0

Views: 48

Answers (2)

Simp4Code
Simp4Code

Reputation: 1479

Try this, add class d-flex flex-column to each .col and then add mx-auto class to each child in that column

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

vinkomlacic
vinkomlacic

Reputation: 1879

Here is a nice guide for the grid system in bootstrap: https://hub.packtpub.com/bootstrap-grid-system-responsive-website/

You need to make two rows - first row with the pictures, and the second row with the 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>

Upvotes: 1

Related Questions