Create full fluid parent width container Buttons using Bootstrap classes in HTML,PHP

How to make small,medium,large height rounded corners buttons with full page width adopt feature.

Full width container buttons are which is adept the whole web page width and make the button width as defined in his parent element. So whatever width you have define on its parent element it will adopt it. With Bootstrap website developer can create three different type of size( Height ) buttons. So here is the complete step by step tutorial for Create full fluid parent width container Buttons using Bootstrap classes in HTML,PHP.

Classes name for full width buttons is :

  • .btn-block
  • .btn-sm .btn-block
  • .btn-lg .btn-block

How to Create full fluid parent width container Buttons using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for fluid-buttons.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Fluid Buttons</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">

<h1> Normal Full Width Buttons</h1>
 
 <input type="submit" class="btn btn-info btn-block" value="Button-1">
 <input type="submit" class="btn btn-default btn-block" value="Button-2">
 <input type="submit" class="btn btn-success btn-block" value="Button-3">
 <input type="submit" class="btn btn-primary btn-block" value="Button-4">
 <input type="submit" class="btn btn-danger btn-block" value="Button-5">
 <input type="submit" class="btn btn-warning btn-block" value="Button-6">
 
 <h1> Small Full Width Buttons</h1>
 
 <input type="submit" class="btn btn-info btn-block btn-sm" value="Button-1">
 <input type="submit" class="btn btn-default btn-block btn-sm" value="Button-2">
 <input type="submit" class="btn btn-success btn-block btn-sm" value="Button-3">
 <input type="submit" class="btn btn-primary btn-block btn-sm" value="Button-4">
 <input type="submit" class="btn btn-danger btn-block btn-sm" value="Button-5">
 <input type="submit" class="btn btn-warning btn-block btn-sm" value="Button-6">
 
 <h1> Large Full Width Buttons</h1>
 
 <input type="submit" class="btn btn-info btn-block btn-lg" value="Button-1">
 <input type="submit" class="btn btn-default btn-block btn-lg" value="Button-2">
 <input type="submit" class="btn btn-success btn-block btn-lg" value="Button-3">
 <input type="submit" class="btn btn-primary btn-block btn-lg" value="Button-4">
 <input type="submit" class="btn btn-danger btn-block btn-lg" value="Button-5">
 <input type="submit" class="btn btn-warning btn-block btn-lg" value="Button-6">
 
</div>

</body>
</html>

Screenshot:

Create full fluid parent width container Buttons using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *