How do i make my button div responsive in every device

responsive button bootstrap
bootstrap buttons
bootstrap button group selected
bootstrap button group spacing
button group css
bootstrap radio button
bootstrap 4 button with icon
how to make button responsive in css

I am working on a simple project. I need some help in making my button responsive in every device. When I see this in iPad, the button moves top in device. I want it in middle of page in every other device.

<div class="d-flex justify-content-center align-items-center container ">
   <a href="video.php"
         <button type="button" id="screen" class="btn btn-primary" style="margin-top: 25%"> btn-Start ScreenSaver-btn </button>
   </a>    
</div>

Any help would be greatly appreciated.

Here is an example. First of all ... dont use the html button tag inside a-tag. You can display the link itself as a button by only using the bootstrap classes.

example-code:

<div class="d-flex justify-content-center align-items-center container" style="height:300px;">
   <a href="video.php" class="btn btn-primary" id="screen"> btn-Start ScreenSaver-btn </button>
   </a>
</div>

Note that I use height:300px in the div style as an example

Responsive Buttons with Bootstrap | by Travis Horn, The goal is to get a button to have a limited width unless the screen is small, The button is inside a <div> with col-md-4 and col-lg-2 classes. Make it responsive. The web is accessible on a huge range of devices from small-screen phones through to huge-screen televisions. Each device presents its own unique benefits and also constraints. As a web developer, you are expected to support all ranges of devices. We are building a site that works across multiple screen sizes and device types.

Add height:100% to your container, Example fiddle

HTML

<div class="d-flex justify-content-center align-items-center container ">
   <a href="video.php">
         <button type="button" id="screen" class="btn btn-primary" style="margin-top: 25%"> btn-Start ScreenSaver-btn </button>
   </a>    
</div>

CSS

html, body, .container {
  height: 100%;
}

Button group � Bootstrap, Group a series of buttons together on a single line with the button group, and < div class="btn-group" role="group" aria-label="Basic example"> <button For button groups, this would be role="group" , while toolbars should have a button sizing classes to every button in a group, just add .btn-group-* to each .btn-group � Using CSS3 to Make Responsive Buttons. Making a site mobile-friendly is actually quite simple, but it does involve additional work, particularly with your Cascading Style Sheet (CSS). Once you have created the code for your buttons, you then create "media queries" for the different sizes of devices that might be used to view your website.

html, body, .container {
  height: 100%;
}

C38: Using CSS width, max-width and flexbox to fit labels and inputs, Responsive layouts can add or remove columns or layout blocks, and each part of All labels and inputs require design finesse by making sure the original size fits class="offset-form-col-4 form-col-8"> <button>Submit</button> </div> </div> . In this article, I’ll teach you how to use CSS Grid to create a super cool image grid which varies the number of columns with the width of the screen. And the most beautiful part: the responsiveness will be added with a single line of CSS. This means we don’t have to clutter up the HTML with ugly class names (i.e. col-sm-4, col-md-8) or create media queries for every single screen size. If

     html,body{
            height: 100%;
        }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="d-flex justify-content-center align-items-center container h-100">
    <a href="video.php">
    <button type="button" id="screen" class="btn btn-primary"> btn-Start ScreenSaver-btn </button>
    </a>
</div>

When To Use The Button Element, Clicking that button will clear all the other inputs (and textareas) with the parent Somehow that feels better than a <div> whatever, because you get the cursor� In this post, we discussed two ways to make your embeds responsive in WordPress: Use a plugin such as EmbedPress to automatically make YouTube, Instagram, and Google embeds responsive. Manually edit your theme’s files and wrap your embed code in a div tag with the iframe-container class.

How To Make a DIV Full Height of the Browser Window, Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to� Fantastic, this inspired me to make my button group “responsive”. I need them to be all same sized, but also to have different sizing according to the viewport. This did it for me, including the class to add a bit padding to the button only in big sc

Responsive Two Column Layout, Create two equal columns that floats next to each other */ Responsive layout - makes the two columns stack on top of each other instead of next to each other� Responsive Font Size. The text size can be set with a vw unit, which means the "viewport width".. That way the text size will follow the size of the browser window:

Skeleton: Responsive CSS Boilerplate, The max width can be changed with one line of CSS and all columns will resize just use a number and class 'column' or 'columns' --> <div class="row"> <div gutters (which can end up being *really* small on certain browser/device sizes) -- > Button styles are applied to a number of appropriate form elements, but can� Going responsive is hard. It takes a lot of research and practice to get right. I hope this tutorial has helped your understanding of how to implement a responsive navigation menu into your projects. If you have any questions or comments just leave them below and I’ll get back to you ASAP. Here are a few resources that should help:

Comments
  • Welcome on SO: please take some time to review your post before submitting: the CSS code is missing and you didn't provide a minimal reproducible example. As a side note you have a button inside a link (which is invalid) and the link tag itself is malformed.
  • May be this can help you: templatemonster.com/blog/…