Bootstrap 4 Width


Basic Width

The width of an element is set with .w- * classes in bootstrap. Width has 5 classes -

.w-25
.w-50
.w-75
.w-100
.mw-100

Example Code

<div class="bg-primary mb-2 w-25">.w-25</div>
<div class="bg-primary mb-2 w-50">.w-50</div>
<div class="bg-primary mb-2 w-75">.w-75</div>
<div class="bg-primary mb-2 w-100">.w-100</div>
<div class="bg-primary mb-2 mw-100">.mw-100</div>

Container with width

Container with width

Example Code

<div class="container bg-primary bg p-3 w-25">
Container with width
</div>

Table column width

Name Subject
<table class="table table-bordered w-100 table-responsive-sm">
<thead>
<th>Name</th>
<th>Subject</th>
</thead>
</table>

Modal Sizes

Small Modal

If you want to make the modal dialog in Bootstrap smaller, add the .modal-sm class with the .modal-dialog class.

Example code

<div class="modal-dialog modal-sm">

Large Modal

If you want to make the modal dialog in Bootstrap Large, add the .modal-lg class with the .modal-dialog class.

Example code

<div class="modal-dialog modal-lg">

Extra Large Modal

If you want to make the modal dialog in Bootstrap Extra Large, add the .modal-xl class with the .modal-dialog class.

Example code

<div class="modal-dialog modal-xl">

Input width

<input type="text" class="form-control w-25 mb-2" placeholder="25% width of input" name="">
<input type="text" class="form-control w-50 mb-2" placeholder="50% width of input" name="">
<input type="text" class="form-control w-75 mb-2" placeholder="75% width of input" name="">
<input type="text" class="form-control w-100 mb-2" placeholder="100% width of input" name="">
<input type="text" class="form-control mw-100 " placeholder="100% max-width of input" name="">

Button width

<button class="w-25 btn btn-primary mb-2">25% width</button>
<button class="w-50 btn btn-primary mb-2">50% width</button>
<button class="w-75 btn btn-primary mb-2">75% width</button>
<button class="w-100 btn btn-primary mb-2">100% width</button>
<button class="mw-100 btn btn-primary mb-2">100% max-width</button>

Tooltip width

<style>
.tooltip{
	width: 200px;
	margin: auto;
}
</style>
<body>
<button class="btn btn-primary" data-toggle="tooltip" title="Top Tooltip">Hover me!</button>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>

Popover Width

<style>
.popover{
	width: 100%;
	}
</style>
<body>
<button class="btn btn-primary" data-toggle="popover" title="Popover Heading" data-content="This is the popover content.">Click me!</button>
<script type="text/javascript">			
$(document).ready(function(){
$('[data-toggle=popover]').popover();
});
</script>
</body>