Twitter Bootstrap Question posted in

How to move two input boxes in a row-Twitter bootstrap

I have designed two input boxes and I want to move them together, but my code doesn’t work

This should have a simple solution yet they just appear like a list, not in a row.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<h2>ِStart Time</h2>
<div class="row">
  <div class="col">
    <label for="startTime">Hour(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="23">
  </div>
  <div class="col">
    <label for="startTime">Minute(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="59">
    <!--input type can be changed accordingly-->
  </div>
</div>

Where did I do wrong?

Tags:

2

Answers


  1. 0

    I dont know what you exactly want. It runs good in modern browser. May be there have an issue with col class. Sometimes I faced some annoying thing with this class. just change them with grid system. Here is the code below,

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<h2>ِStart Time</h2>
<div class="row">
  <div class="col-sm-6">
    <label for="startTime">Hour(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="23">
  </div>
  <div class="col-sm-6">
    <label for="startTime">Minute(s) </label>
    <input type="number" class="form-control" id="endTime" min="0" max="59">
    <!--input type can be changed accordingly-->
  </div>
</div>

    I think you must know bootstrap’s grid system. https://getbootstrap.com/docs/4.0/layout/grid/

    Login or Signup to reply.
  2. 0

    just change display:flex to display:inline-flex in the row class

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<h2>ِStart Time</h2>
<div class="row" style="display:inline-flex;">
  <div class="col">
    <label for="startTime">Hour(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="23">
  </div>
  <div class="col">
    <label for="startTime">Minute(s) </label>
    <input type="number" class="form-control" id="startTime" min="0" max="59">
    <!--input type can be changed accordingly-->
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search