CODEWITHSUNDEEP
htmlbootstrap-4
tylerlecho
tylerlecho

Reputation: 71

Bootstrap 4 input-group-addon not working

I'm currently using Bootstrap 4 for a project in a JavaScript course im following, and im doing the HTML, but i've run into an issue with the input-group-addon class on a span. It's not showing like the icon is showing in the tutorial

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
crossorigin="anonymous">

<title>Loan Calculator</title>
</head>
 <body class="bg-dark">
 <div class="contr">
  <div class="row">
    <div class="col-md-6 mx-auto">
      <div class="card card-body text-center mt-5">
        <h1 class="heading display-5 pb-3">Loan Calculator</h1>
        <form id="loan-form">
          <div class="form-group">
          <div class="input-group">
            <span class="input-group-addon">$</span>
            <input type="number" class="form-control" id="amount" placeholder="Loan Amount">
          </div>
          </div>

          <div class="form-group">
          <div class="input-group">
            <span id="input-group-addon">%</span>
            <input type="number" class="form-control" id="interest" placeholder="Interest Rate">
          </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-

JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">

Upvotes: 0

Views: 2639

Answers (1)

Arleigh Hix
Arleigh Hix

Reputation: 10897

Your structure and class names are a little bit off. You need a span.input-group-text nested inside a div.input-group-prepend

  <div class="form-group">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">$</span>
      </div>
      <input type="number" class="form-control" id="amount" placeholder="Loan Amount">
    </div>
  </div>

.input-group-addon does not appear in the v4.0 documentation that was for v3.

Upvotes: 1

Related Questions