How to make input fields display in the same row in an HTML card?-CodePudding

How can I make Quarter and Month display in the same row, as well as Week and Date in a row right below?

<base target="_top">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous">
</script>

<div id="cardsContainer">
  <div >
    <div >
      <div >
        <form>
          <div >
          <label for="quarter">Quarter:</label>
          <input type="text"  id="quarter" value="1">
          <label for="monthNum">Month:</label>
          <input type="text"  id="monthNum" value="2"></div>
          <div >
          <label for="weekNum">Week:</label>
          <input type="text"  id="weekNum" value="4">
          <label for="date">Date:</label><input type="text"  id="date" value="12/31/1969">
          </div>
          <div >
          <label for="status">Status:</label>
          <input type="text"  id="status" value="Planned">
          </div>
          <a href="https://tesla-cdn.thron.com/delivery/public/image/tesla/03e533bf-8b1d-463f-9813-9a597aafb280/bvlatuR/std/4096x2560/M3-Homepage-Desktop-LHD"><img src="https://tesla-cdn.thron.com/delivery/public/image/tesla/03e533bf-8b1d-463f-9813-9a597aafb280/bvlatuR/std/4096x2560/M3-Homepage-Desktop-LHD"  height="180px"></a>
          <div >
          <label for="post">Post:</label>
          <textarea  id="post" style="height: 444px;">Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum /
          </textarea></div>
          <div >
          <label for="publishedPostLink">Published Link:</label>
          <input type="text"  id="publishedPostLink" value="https://posts.gle/nTUL97">
          </div>
          <div  hidden="">
          <label for="postNum">Post Number:</label>
          <input type="text"  id="postNum" value="1">
          </div>
        </form>
      </div>
    </div>

CodePudding user response：

To make the Quarter and Month display in the same row and the Week and Date in another row, you can use the Bootstrap grid system. Add a "row" class to wrap the two groups of inputs, and use "col-sm-6" class for each input group to make them span half of the row on small devices:

<div >
  <form>
    <div >
      <div >
        <label for="quarter">Quarter:</label><input type="text"  id="quarter" value="1">
        <label for="monthNum">Month:</label><input type="text"  id="monthNum" value="2">
      </div>
      <div >
        <label for="weekNum">Week:</label><input type="text"  id="weekNum" value="4">
        <label for="date">Date:</label><input type="text"  id="date" value="12/31/1969">
      </div>
    </div>
    <!-- rest of the form -->
  </form>
</div>