CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
raghucw18
raghucw18

Reputation: 3

Bootstrap Create a large button

How can i create a large button in bootstrap with responsive

just like the image below

https://i.sstatic.net/xEBwc.png

Upvotes: 0

Views: 3379

Answers (4)

wang
wang

Reputation: 612

If you just want big button ,you can use the 'btn-l' class.

<button type="button" class="btn btn-primary btn-lg">Large button</button>

If you want to change the button's width when the screen changed, you can use flexbox utilities, here I used 'd-flex' and 'flex-grow-1'.

.bd-highlight{
  background:red;
  border: 1px solid blue;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="d-flex bd-highlight">
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
  <div class="p-2 flex-grow-1 bd-highlight">Third flex item</div>
</div>

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

Use class="row" to wrap div and col-xs-4 (or col-md-4...) to div that wrap the button...

Use btn-lg and also own css to override bootstrap definition...

I use width:100%; because you want big buttons(as you said...)

    .btn-default{
      width:100%;
      background-color:orange!important;
      margin:5px!important;
    }
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      
    <div class="container">
     <div class="row">
        <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
            <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
            <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
        <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
         <div class="col-xs-4">
          <button type="button" class="btn btn-default btn-lg">Basic</button>
        </div>
     </div>
    </div>

Upvotes: 2

Joji
Joji

Reputation: 356

use .btn-lg and .btn-block class of bootstrap

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-warning btn-lg btn-block">Block level button</button>


<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

Upvotes: 0

Arex
Arex

Reputation: 694

Here I have provided an example with three large buttons:

HTML:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>


  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
  <button type="button" class="btn btn-primary btn-lg">Large</button>
</body>

CSS:

.btn
{
  width:250px;
}

Hopefully this is what you need.

Upvotes: 0

Related Questions