CODEWITHSUNDEEP
twitter-bootstrapbootstrap-4
Gihan
Gihan

Reputation: 3749

Bootstrap 4 Make Buttons Responsive

I'm trying to make some centered buttons in Bootstrap 4 for a project. I'm a beginner to coding and so far I've achieved this and I want them to stack up when viewed in tablet and mobile devices. Right now it comes over top of each other in mobile and tablet devices.

Any help you can provide would be greatly appreciated. :)

My Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid py-2">
		<div class="row text-center">
			<div class="col-10 offset-1">

				<button class="btn btn-primary mr-2 select-all">Select All Items</button>
				<button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>
				<button class="btn btn-primary mr-2" id="latencybutton">New Items</button>
				<button class="btn btn-primary mr-2 clear-all">Clear All</button>
				<button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
				<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
					<button class="dropdown-item select-1" type="button">Items 1</button>
					<button class="dropdown-item select-2" type="button">Items 2</button>
					<button class="dropdown-item select-3" type="button">Items 3</button>
					<button class="dropdown-item select-4" type="button">Items 4</button>
				</div>
			</div>
		</div>
	</div>

Upvotes: 1

Views: 2316

Answers (3)

tao
tao

Reputation: 90013

Wrap all your buttons in a <div> with the unique id of your choice. Then use this snippet:

$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})

... replacing #myGroup with your unique id and 720 with the desired width, according to Bootstrap's Grid system responsiveness breakpoints.

See it working: 

$(window).on('load resize', function(){
  $('#myGroup').toggleClass('btn-group-vertical', $(window).width() < 720)
})
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container-fluid py-2">
  <div class="row text-center">
    <div class="col-10 offset-1">
      <div id="myGroup" role="group">
        <button class="btn btn-primary mr-2 select-all">Select All Items</button>
        <button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button>
        <button class="btn btn-primary mr-2" id="latencybutton">New Items</button>
        <button class="btn btn-primary mr-2 clear-all">Clear All</button>
        <button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <button class="dropdown-item select-1" type="button">Items 1</button>
          <button class="dropdown-item select-2" type="button">Items 2</button>
          <button class="dropdown-item select-3" type="button">Items 3</button>
          <button class="dropdown-item select-4" type="button">Items 4</button>
        </div>
    </div>
  </div>
</div>

The snippet applies the vertical variation of Bootstrap's .btn-group (.btn-group-vertical) to the wrapper based on whether the window's width is smaller than the specified width.

The check is done on window's load and resize events. If you want to use this into a lot of places, you might want to throttle its execution, as resize event can trigger very many times per second.
It's not an issue if you only use it once, though, specifically because both the condition checked and the DOM manipulation are quite light.

Upvotes: 1

RR1112
RR1112

Reputation: 232

Bootstrap 4 grid may be help you to achieve this. Below is an updated version of your code snippet that creates responsive buttons, which appear horizontally in large screens and vertically in small and medium sized screen.

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="container-fluid py-2">
  <div class="row"> 
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 select-all">Select All Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 unselect-all">Unselect All Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2" id="latencybutton">New Items</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 clear-all">Clear All</button></div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-2 col-xl-2 mb-1"><button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Remove Items</button>
                      <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
                              <button class="dropdown-item select-1" type="button">Items 1</button>
    	                        <button class="dropdown-item select-2" type="button">Items 2</button>
    	                        <button class="dropdown-item select-3" type="button">Items 3</button>
    	                         <button class="dropdown-item select-4" type="button">Items 4</button>
                      </div>
    </div>
  </div>
 </div>

Upvotes: 1

Stranger
Stranger

Reputation: 107

Maybe try something like mobile menu case... I mean... it will be some kind of html element duplication but u could try this. Create the dropdown button and put inside those buttons you already have and set at desktop resolution as display: none; The buttons you already have just set in mobile media query as display: none;

Result should be that on the desktop width of page you should have normal buttons separately placed, and on mobile you should see one dropdown button with your buttons inside.

Upvotes: 1

Related Questions