CODEWITHSUNDEEP
javascripthtmljquerycss
stracc
stracc

Reputation: 519

How do I put buttons fitting entire page?

I have the following code, when I put width: 33.3% in the button class, the buttons fit 33.3% of their current width instead of the entire page. 

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style>
.btn-group{
    display: flex;
    position: absolute;    
    top: 50%;
    justify-content: center;
    width: 100%;
}

.button{
   background-color: #008080;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

.button:hover {
    background-color:#75a3a3;
}

</style>

</head>

<body>
<div class="btn-group">
      <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
      <form action="#" method="post"><button class="button" type="submit">Button 2</button></form> 
      <form action="#" method="post"> <button class="button"type="submit">Button 3</button></form> 
</div>


</body>

How do I put the buttons fitting the entire page? Having 0 margin in between. Thank you!!

enter image description here

Upvotes: 0

Views: 56

Answers (2)

kaize
kaize

Reputation: 811

Add the 2 rules below 

.btn-group form:nth-child(1) {
    flex: 1
}
.button {
   width:100%
}

Is this what you look for?

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<style>
.btn-group{
    display: flex;
    position: absolute;    
    top: 50%;
    justify-content: center;
    width: 100%;
}

.button{
   background-color: #008080;
   /* Green */
   border: none;
   color: white;
   padding: 15px 32px;
   text-align: center;
   font-size: 16px;
   cursor: pointer;
}

.button:hover {
    background-color:#75a3a3;
}
.btn-group form:nth-child(1) {
    flex: 1
}
.button {
   width:100%
}
</style>

</head>

<body>
<div class="btn-group">
      <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
      <form action="#" method="post"><button class="button" type="submit">Button 2</button></form> 
      <form action="#" method="post"> <button class="button"type="submit">Button 3</button></form> 
</div>


</body>

To better understand of Flex styles address here

Upvotes: 1

antlis
antlis

Reputation: 425

If I understand your question correctly, maybe this will help.

<head>

  <meta charset="utf-8">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  <style>
    .btn-group {
      display: flex;
      position: absolute;
      top: 50%;
      justify-content: center;
      width: 100%;
    }
    
    .btn-group>form {
      flex-grow: 1;
    }
    
    .button {
      width: 100%;
      background-color: #008080;
      /* Green */
      border: none;
      color: white;
      padding: 15px 32px;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
    }
    
    .button:hover {
      background-color: #75a3a3;
    }
  </style>

</head>

<body>
  <div class="btn-group">
    <form action="dataVis" method="post"><button class="button" type="submit">Real-Time Data Visualizarion</button></form>
    <form action="#" method="post"><button class="button" type="submit">Button 2</button></form>
    <form action="#" method="post"> <button class="button" type="submit">Button 3</button></form>
  </div>


</body>

Upvotes: 2

Related Questions