Bootstrap input button group addon, show first button with round corner after second button is hidden

bootstrap input-group rounded corners
input-group-addon bootstrap
bootstrap button
input-group-prepend background color
bootstrap button group
bootstrap 4 input-group width 100
bootstrap input-group size
bootstrap dropdown

I have a button group where I hide the second button at runtime.

But the first button now as a 90° border. How do I modify the following sample in order to get button 1 show with a round border.

If I hide "button 2" the

$("#btn1").click(function() {
   $("#btn2").show();
});
$("#btn2").click(function() {
   $("#btn2").hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

You can toggle a class to hide and to also control the radius:

$("#btn1").click(function() {
   $("#btn1").removeClass('hide');
});
$("#btn2").click(function() {
   $("#btn1").addClass('hide');
});
button.hide + button {
  display:none;
}
button.hide {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

How to give spacing between buttons using bootstrap, How do I move a button to the left in bootstrap? Bootstrap 4 Input Groups. The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind the input field as a "help text". Use .input-group-prepend to add the help text in front of the input, and .input-group-append to add it behind the input.

You could do :

$("#btn1").click(function() {
  $("#btn2").show();
  $("#btn1").removeClass("myBorder");
});
$("#btn2").click(function() {
  $("#btn2").hide();
  $("#btn1").addClass("myBorder");
});
.myBorder {
  border-top-right-radius: .25rem!important;
  border-bottom-right-radius: .25rem!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Bootstrap buttons tutorial - sizes, colours and more, Easily extend form controls by adding text, buttons, or button groups on either side Place any checkbox or radio option within an input group's addon instead of text. <input type="radio" aria-label="Radio button for following text input"> </​div> </div> <input type="text" aria-label="First name" class="form-control"> <​input  < div class =" input-group " > < input type =" text" class =" form-control" required > < div class =" input-group-append " > < span class =" input-group-text rounded-right " >.00 </ span > </ div > < div class =" invalid-feedback " > Please enter value.

You're fighting against bootstrap by trying to modify the nth button border. Here's the style that you're fighting against:

.input-group>.input-group-append:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group>.input-group-append:last-child>.input-group-text:not(:last-child), .input-group>.input-group-append:not(:last-child)>.btn, .input-group>.input-group-append:not(:last-child)>.input-group-text, .input-group>.input-group-prepend>.btn, .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

Instead of applying custom CSS and fighting bootstrap, you might be better off removing the item from the DOM instead of hiding it.

var btn = $("#btn2"), parent = btn.parent()
$("#btn1").click(function() {
   btn.appendTo(parent)
});
$("#btn2").click(function() {
	btn.detach()
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group col-md-6">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <button id="btn1" class="btn btn-outline-secondary" type="button">Button 1</button>
    <button id="btn2" class="btn btn-outline-secondary" type="button">Button 2</button>
  </div>
</div>

Input group · Bootstrap, Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for glyphicon glyphicon-ban-circle; glyphicon glyphicon-arrow-left; glyphicon for instance, include additional content, visually hidden with the .sr-only class. Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs​. Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.

Components · Bootstrap, Under certain screen widths (responsive) I hide some of these buttons with It's a difficult problem to describe, but very easy to show in a Fiddle. role="group"> <button type="button" class="btn btn-default">First</button> </div> Note the lack of rounded corners on 'fifth' in the second button group. node.js-addon · kodi Button classes Base buttons and their colours. Bootstrap includes nine base button styles, each of them serving its own semantic purpose. The buttons have a white-coloured text and a background based on the btn-[colour] class that's used along with the btn class.

How to ignore hidden elements in a Bootstrap Button Group?, 22 Nov 2017 Learn how to use glyphicons to add icons to bootstrap buttons with or without modal on button click without using the jQuery. css Bootstrap Input Groups. Since Bootstrap is a “Mobile First” CSS framework you need to write your you change the button text to help the user know to show or hide the content. Button Groups. Bootstrap allows you to group a series of buttons together (on a single line) in a button group:

Bootstrap button with icon and text, feeback right after input --> <div class="invalid-feedback">can't be blank, or a checkbox was the first addon, and tab-order was changed since flex issues with the pseudo :invalid and :valid states in Firefox. the button 74 hidden items Bootstrap 4 "input-group-append" validation showing in two lines  I considered reporting it, but as far as I can tell, Bootstrap doesn't support having button groups next to input-group-addons (at least not officially). .input-group-btn:not(:first-child):not(:last-child) having a border-radius of 0 is more a result of consolidating the CSS than anything on purpose, I think.

Comments
  • Am I wrong, or the CSS method is showing the best performance? (I never used jsperf before)
  • Yes CSS is and will always be fastest by far.