How to put scroll bar only for modal-body?

 https://stackoverflow.com/questions/25874001/how-to-put-scroll-bar-only-for-modal-body

If you're only supporting IE 9 or higher, you can use this CSS that will smoothly scale to the size of the window. You may need to tweak the "200px" though, depending on the height of your header or footer.

.modal-body{
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

Left & right align modal footer buttons in Bootstrap 4

 https://stackoverflow.com/questions/43042262/left-right-align-modal-footer-buttons-in-bootstrap-4

Now that the modal-footer is "display:flex" in Bootstrap 4, it would be easiest to use the auto-margins. Use mr-auto on the left button.

<div class="modal-footer">
     <button type="button" class="btn btn-primary mr-auto">Save changes</button>
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>

Demo

Also see: Left align and right align within div in Bootstrap

---

Follow-up to comment "What if I need the button on the right to occupy all the space left?" - Use the btn-block class:

<div class="modal-footer">
     <button type="button" class="btn btn-primary text-nowrap">Save changes</button>
     <button type="button" class="btn btn-secondary btn-block ml-1" data-dismiss="modal">Close</button>
</div>

bootstrap dropdown bubble align right (not push-right)

Source: https://stackoverflow.com/questions/18892351/bootstrap-dropdown-bubble-align-right-not-push-right

Bootstrap 3.1+

Adding the class .dropdown-menu-right to the same div containing the class dropdown-menu:

<div class="dropdown-menu dropdown-menu-right">
    STUFF
</div>

http://getbootstrap.com/components/#dropdowns-alignment

Bootstrap 2.3 & 3.0

Add the class .pull-right to the same div containing the class dropdown-menu

<div class="dropdown-menu pull-right">
    STUFF
</div>

This seems to work for me using bootstrap 3.0

What is class=“mb-0” in Bootstrap 4?

Source: https://stackoverflow.com/questions/41574776/what-is-class-mb-0-in-bootstrap-4

Bootstrap has a wide range of responsive margin and padding utility classes. They work for all breakpoints:

xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px))

The classes are used in the format:

{property}{sides}-{size} for xs & {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

m - sets margin

p - sets padding

---

t - sets margin-top or padding-top

b - sets margin-bottom or padding-bottom

l - sets margin-left or padding-left

r - sets margin-right or padding-right

x - sets both padding-left and padding-right or margin-left and margin-right

y - sets both padding-top and padding-bottom or margin-top and margin-bottom

blank - sets a margin or padding on all 4 sides of the element

---

0 - sets margin or padding to 0

1 - sets margin or padding to .25rem (4px if font-size is 16px)

2 - sets margin or padding to .5rem (8px if font-size is 16px)

3 - sets margin or padding to 1rem (16px if font-size is 16px)

4 - sets margin or padding to 1.5rem (24px if font-size is 16px)

5 - sets margin or padding to 3rem (48px if font-size is 16px)

auto - sets margin to auto

Bootstrap 4.3 Documentation

Read more in w3schools

Link in form-control-feedback can't be clicked in Bootstrap 3.3.5

Source: https://stackoverflow.com/questions/35925832/link-in-form-control-feedback-cant-be-clicked-in-bootstrap-3-3-5

That's simple, in 3.3.5 the class .form-control-feedback has pointer-events:none which makes that element not clickable.

see a snippet with v3.3.5

.form-group .form-control-feedback {
  top: 0;
  right: 44px;
  pointer-events: initial; /* or - auto // or -  unset  */
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group has-feedback">
  <label class="control-label sr-only" for="rename"></label>
  <input value="hello" id="rename" type="text" maxlength="255" class="form-control name-check">
  <span class="form-control-feedback">
    <a class="pointer" onclick="console.log('I love u')"><small>cancel</small></a>&nbsp;<a class="pointer" onmousedown="save=true;" onclick="console.log('i love u too')"><small><i>save</i></small></a>  
  </span>
</div>