I am facing issues with the Bootstrap. I have read a few posts that it works well with bootstrap 3.3.7, so I have used it. But to my surprise, it is not working. I don’t know what I am missing. Any help would be appreciated. Below is the code I have used:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
<?php echo file_get_contents(BASEURL . 'public/assests/css/bootstrap_3_3_7.min.css'); ?>
.p-3 {
padding: 0.7rem !important;
}
.mb-4 {
margin-bottom: 1.5rem !important;
}
.border {
border: 1px solid #dee2e6 !important;
}
</style>
</head>
<body style="font-size: 18px !important;">
<div class="container mt-2">
<div class="row border p-3 mb-4">
<div class="col-xs-3">
<label for="" class="form-label">Code</label>
<input class="form-control" type="text" value="11">
</div>
<div class="col-xs-3">
<label for="" class="form-label">Name</label>
<input class="form-control" type="text" value="22">
</div>
<div class="col-xs-3">
<label for="" class="form-label">Email</label>
<input class="form-control" type="text" value="33">
</div>
<div class="col-xs-3">
<label for="" class="form-label">Contact Number</label>
<input class="form-control" type="text" value="44">
</div>
</div>
</div>
</body>
</html>
This is the pdf I am getting:
I have got 2 issues here:
- Why the last text box is out of the ‘border’ property box?
- Why is there a lots of space on both sides?
Thanks in advance.