CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
stracc
stracc

Reputation: 519

How to make 2 in-line buttons have the same height

I attach a snipped below, as you can see, the 2 buttons show a different height, I would like them to have the same height when I change the page size, and be on the same line.

enter image description here

I don't want to just say height: 100px, because when I open it on a phone it would deform.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    .dropbtn {
      background-color: #264653;
      border: none;
      color: white;
      padding: 0.1%;
      text-align: center;
      cursor: pointer;
      width: 100%;
      flex-grow: 1;
      display: block;
    }
    
    .dropdown {
      position: relative;
      display: block;
      width: 100%;
    }
  </style>
</head>

<body>
  <h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
  <div style="width: 100%; height: 100%;" class="container-fluid">
    <div class="dropdown" style="width: 50%; float:left; height: 100%;">
      <button class="dropbtn" style="width: 100%; height:100%;"><h2>File: 2019717_1828_FMCI_107.txt Device 107 </h2> </button>
    </div>
    <div class="dropdown" style="width: 50%; float:right; height: 100%;">
      <button class="dropbtn" style="height: 100%;"><h2> Channel:0 <i class="fa fa-caret-down"></i></h2> </button></div>

</body>

Thank you very much for your help.

Upvotes: 1

Views: 876

Answers (1)

Nikhil
Nikhil

Reputation: 3950

you can use bootstrap container for it:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="Description" content="Enter your description here"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>Title</title>    

    </style>
    </head>
    <body>

    <h1 align="center" style="padding-left: 20px; width: 100%">ANNOTATION TOOL</h1>
    

    <div class="container">
  <div class="row">
    <div class="col-sm">
     <button type="button" class="btn btn-primary" style="width: 100% " >Primary</button>
    </div>
    <div class="col-sm">
      <button type="button" class="btn btn-primary" style="width: 100% "> Primary</button>
    </div>
  </div>
</div>
    <div style="width: 100%; height: 100%;" class="container-fluid">
    

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
    </body>
    </html>

check: https://jsfiddle.net/pk78ntze/

Upvotes: 1

Related Questions