Change buttons to "btn-block" on mobile screen size

For Bootstrap 4.3 you can use built in classes. Mobile: Display Block Desktop: Display Inline block

<a href="#button1" class="btn d-block d-md-inline-block">Button 1</a>
<a href="#button1" class="btn d-block d-md-inline-block">Button 2</a>

Add your custom class to the button, and use media queries to set the width to 100% on devices up to your breakpoint. SO ie

<button class"bootstrap classes custom-class></button>

and in CSS

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}

You can also control what is happening above this breakpoint by setting up media queries on different breakpoints.

Related