Bootstrap 4 button group, button text width extends outside of button boundary

Question

I've created a simple radio button group per the BS4 documentation example, but whenever I select a button, I can't help but notice that the active button border juts out a bit on the right side. From what I can tell, it seems like it's trying to make room for "extra" blank space to the right of the button's input text.

This same "jutting out" to the right occurs on all buttons selected within the group, not just the center button.

<div id="image-viewer-controls-wrapper">
  ...  

  <div class="btn-group btn-group-toggle" data-toggle="buttons" id="crop-type">
    <label class="btn btn-primary active">
      <input type="radio" name="crop_type" id="box" autocomplete="off" checked> Box
    </label>

    <label class="btn btn-primary">
      <input type="radio" name="crop_type" id="line" autocomplete="off"> Line
    </label>

    <label class="btn btn-primary">
      <input type="radio" name="crop_type" id="split" autocomplete="off"> Split
    </label>
  </div>
</div>

Any ideas what may be causing this display issue?

If it's of any concern, this button-group div within a flexbox parent div.

KuldipKoradia KuldipKoradia · Accepted Answer · 2019-12-03T08:03:15

just apply CSS to radio buttons as per the below snippet. don't worry about the display:none CSS property your radio functionality will works fine that does not cause any problem to your functionality.

I hope your problem will be solved.

.btn-group-toggle>.btn input[type=radio] {
    display: none;
}

<!DOCTYPE html>
<html>
<head>
	<title>Demo Page</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style>
</style>
<body>
	<div id="image-viewer-controls-wrapper">
		<div class="btn-group btn-group-toggle" data-toggle="buttons" id="crop-type">
			<label class="btn btn-primary active">
				<input type="radio" name="crop_type" id="box" autocomplete="off" checked> Box
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="crop_type" id="line" autocomplete="off"> Line
			</label>
			<label class="btn btn-primary">
				<input type="radio" name="crop_type" id="split" autocomplete="off"> Split
			</label>
		</div>
	</div>
</body>
</html>

Thank you.

Bootstrap 4 button group, button text width extends outside of button boundary

1 Answers