CODEWITHSUNDEEP
htmlcss
Jay Reminiscent
Jay Reminiscent

Reputation: 21

How to align properly the checkboxes?

I'm new to html how can I properly align the check boxes with text? This would be the expected output im not good in english here is the

EXPECTED OUTPUT

EXPECTED OUTPUT

<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div style=" margin-top: 15px;">
  <form action="#" method="post" autocomplete="off">
    <div style=" margin-left: 15px;">
      <label class="checkbox-inline"><input type="checkbox" value="Monday"> Monday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Tuesday"> Tuesday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Wedndesday"> Wedndesday </label> <br>
      <label class="checkbox-inline"><input type="checkbox" value="Thursday"> Thursday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Friday"> Friday </label>
      <label class="checkbox-inline"><input type="checkbox" value="Saturday"> Saturday </label>
    </div>
  </form>
</div>

Upvotes: 1

Views: 311

Answers (1)

Temani Afif
Temani Afif

Reputation: 274307

Use CSS grid:

form div {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  grid-gap:5px 10px;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<form action="#" method="post" autocomplete="off">
  <div style=" margin-left: 15px;">
    <label class="checkbox-inline"><input type="checkbox" value="Monday"> Monday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Tuesday"> Tuesday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Wedndesday"> Wedndesday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Thursday"> Thursday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Friday"> Friday </label>
    <label class="checkbox-inline"><input type="checkbox" value="Saturday"> Saturday </label>
  </div>

Upvotes: 1

Related Questions