This is my code:
<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
<h5 style="color:#000000"><i><b>1,39€</b></i></h5>
<small style="color:#000000" class="FuelName"><b>@fuel.Name</b></small>
</button>
But I want the distance between "1,39€" and "LNG" close, how to archive that?
CodePudding user response：
You can simple use Bootstrap class m-0 on h5 selector.
<!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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Bootstrap 5 / Inside Button spacing</title>
</head>
<body>
<div class="m-2 p-2">
<h6>before</h6>
<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
<h5 style="color:#000000"><i><b>1,39€</b></i></h5>
<small style="color:#000000" class="FuelName"><b>LNG</b></small>
</button>
<h6>after</h6>
<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
<h5 style="color:#000000" class="m-0"><i><b>1,39€</b></i></h5>
<small style="color:#000000"><b>LNG</b></small>
</button>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</div>
</body>
</html>CodePudding user response：
At h5 element you should control margin-bottom, the heading elements in bootstrap have some default values.
Try something like this:
<button class="btn btn-dark" style="margin: 0px 5px 10px 5px;background-color:#eeeeee" disabled>
<h5 style="color:#000000; margin-bottom:0"><i><b>1,39€</b></i></h5>
<small style="color:#000000" class="FuelName"><b>@fuel.Name</b></small>
</button>