Issue
I'm trying to align divs with bootstrap, but it doesn't work.
I don't want to do it by table I have tried with the table tag, but I want to do it by using divs and bootstrap.
I'm not an expert with bootstrap as you can see, but I'm trying.
Can anyone help me?
My screen:
Here is my code:
<div class="d-flex flex-column">
<div class="d-flex flex-row justify-content-around">
<div class="d-flex flex-row">
Código da filial:
<input type="text" class="form-control" name="CTD_ITEM">
</div>
<div class="d-flex flex-row">
Nome:
<input type="text" class="form-control" name="CTD_DESC01">
</div>
</div>
<div class="d-flex flex-row justify-content-around">
<div class="d-flex flex-row">
Estado:
<input type="text" class="form-control" name="CTD_DESC04">
</div>
<div class="d-flex flex-row">
Sigla:
<input type="text" class="form-control" name="CTD_DESC02">
</div>
</div>
</div>
Solution
You should use Grid System of Bootstrap this is a great feature of Bootstrap and Here is example of your divs:
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-4">
Código da filial:
</div>
<div class="col-8">
<input type="text" class="form-control" name="CTD_ITEM">
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-4">
Nome:
</div>
<div class="col-8">
<input type="text" class="form-control" name="CTD_DESC01">
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-6">
<div class="row">
<div class="col-4">
Estado:
</div>
<div class="col-8">
<input type="text" class="form-control" name="CTD_ITEM">
</div>
</div>
</div>
<div class="col-6">
<div class="row">
<div class="col-4">
Sigla:
</div>
<div class="col-8">
<input type="text" class="form-control" name="CTD_DESC01">
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>You can duplication big div under container div to add more fields Refernce of Grid System: https://getbootstrap.com/docs/5.0/layout/grid/
Answered By - Bùi Anh Khoa
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.