As I delve into learning bootstrap, I find myself puzzled by the behavior of my image button. It seems to be scaling to the full width of the screen, which is not what I expected. While I can manually adjust its size, I am curious about the reason behind this unusual occurrence. Normally buttons are compact by default, so this divergence intrigues me.
If you notice any mistakes or areas in my code that could be improved, I would greatly appreciate your feedback.
#grid div {
background: black;
border: 3px solid #000;
}
#grid {
padding-bottom: 50px;
}
ul {
padding-right: 50px;
}
li {
padding-left: 30px;
}
a {
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
text-align: center;
font-weight: bold;
margin-bottom: 100px;
}
#function {
margin-left: auto;
margin-right: auto;
}
.button {
background-color: DodgerBlue;
margin-left: auto;
margin-right: auto;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid" id="grid">
<div class="row">
<div class="col-sm">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" href="#">Converter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">More Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</div>
<h1>Convert your jks to p12!</h1>
<div class="container">
<div class="row">
<div class="col-lg-6" id="function">
<div class="input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01"
aria-describedby="inputGroupFileAddon01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
</div>
</div>
</div>
<div class="button">
<button class="btn">
<i class="fa fa-home"></i>
</button>
</div>