Arranging two input boxes side by side: a step-by-step guide

I designed two input boxes and tried to move them together, but unfortunately my code is not working as expected

It seems like a simple issue, yet the input boxes are displaying like a list rather than side by side.

<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>

Can anyone help me troubleshoot this issue?

htmlcssbootstrap-4

Answer №1

Not entirely sure about your exact requirements, but it seems to be functioning well in modern browsers. However, there might be an issue with the col class. I've encountered some frustrations with this class before; consider replacing it with the grid system instead. Here's the code snippet:

<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>

If you are familiar with Bootstrap's grid system, this link might be helpful: https://getbootstrap.com/docs/4.0/layout/grid/

Answer №2

To make the changes, simply replace display:flex with display:inline-flex within 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shifting an image within a div using HTML5 and CSS3

I am wondering how to position the image 50px from the top and 50px from the left within the div. Should I use padding for this? <header> <img src="logo.png" alt="" /> </header> header { width... height: background: (url) } ...

htmlcss

Troubles encountered with adapting apexcharts size within a react environment

As a novice front-end coder transitioning from a data analyst background, I am currently facing an issue with integrating an ApexChart visual into a flexbox element. The visual appears fine at a resolution of 2560x1440 pixels. However, upon further resizin ...

javascriptcssreactjsapexcharts

The content spills over when applying the Bootstrap Grid system

I am working on creating a display heading that includes images on both the left and right sides of the heading. The layout looks great on larger displays, but as I shrink the display size, the text in the heading overflows the column on the right, causing ...

htmlcssbootstrap-4

Enhance Angular Form Functionality: Implement Button-Triggered Option Selection

My current Angular page features a select dropdown that is automatically populated with existing client addresses, including the option "Add New Address". Clicking on this option opens a modal window where a new address can be entered. Once the new address ...

htmlangulartypescript

Websites are operating at a sluggish pace

Yesterday, out of nowhere, we encountered a vserver issue. If you visit this particular Website: You will notice that it takes forever to load. This problem is affecting all websites hosted on the vserver. I reached out to the Provider to see if there we ...

htmlmysqllinuxapachewebserver

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Hello community, I am currently working on implementing a custom styled drawer within a flexbox container using the styled-engine-sc. I started with a template and tried to convert it into styled-components. Here is the source: https://codesandbox.io/s/vm ...

cssreactjsmaterial-uistyled-components

The hover effect is not altering the color

$(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 200) { $(".nav-bg").css({ "background": "#fff", ...

javascriptjquerycss

Insert JavaScript into this HTML document

I am looking to integrate the "TimeCircles JavaScript library into my project, but I am facing some challenges in doing it correctly. I plan to include the necessary files at the following location: /js/count-down/timecircles.css and /js/count-down/timecir ...

javascriptjqueryhtml

Calculate the total number of vacation days not including holidays and weekend days

Looking for help with a program I've created to calculate total vacation days, excluding weekends and national holidays. Successfully excluded weekends, but struggling with how to ignore national holidays in the calculation. The program is built usin ...

jqueryhtmldatepicker

Use Vue.js to shorten the number of decimal places and include commas in numerical values

How can I best parse a long number retrieved from a JSON using VueJS within a for loop? The JSON data is used in a v-for prop to create Li elements for a side navigation. I attempted to use vue-numeric without success since the project does not utilize ECM ...

htmlvue.jsvuejs2

Is there a way to extract the content within the HTML tags as well as the text enclosed within parentheses?

When working with my HTML content, I came across the following line: <span>(48 עמודים סה"כ )</span> I am seeking a way to extract only the text "48 עמודים סה"כ" and store the number 48 into an integer variable. Although in t ...

c#html.net

Overlay with a progress bar that obscures visibility

I'm dealing with a progress bar that needs to be displayed on top of an overlay. If you take a look at this jsfiddle, you can see the issue. Here's the markup: <div class="overlay mouse-events-off"> <div class="progress progress-st ...

csstwitter-bootstrap

Retrieve an HTML element that is a select option with jQuery

I have a select input containing different options as shown below: <select id="myArea"> <option class="myClass_1" style="color:red;" value="1">Area 1</option> <option class="myClass_2" style="color:green;" value="2">Area 2& ...

javascriptjqueryhtmlhtml-select

Sorting rows dynamically with jQuery Tablesorter

I've been struggling to find a solution for my specific issue. I need to have a static row in a large table that will not sort or move, allowing for repeated headers. Can anyone offer assistance with this? $("#dataTable").tablesorter({ ...

javascriptjqueryhtmlhtml-tabletablesorter

Utilizing Flask's get and post methods in conjunction with AJAX integration

I am in the process of developing a food calorie web application and would like to extract data from a MongoDB database into an HTML table. This is my python code: from flask import Flask from flask import request import requests from wtforms import Form ...

javascriptjquerypythonhtmlflask

Toggle child checkboxes when parent checkbox is clicked in angularjs

Can anyone help me figure out how to automatically select child checkboxes when the parent checkbox is clicked? In the code below, I have a parent checkbox in the table header and child checkboxes in the table body. When the parent checkbox is selected, ...

angularjshtml

Enhance your web form with the Bootstrap 4 tags input feature that allows users to add tags exclusively

I'm currently utilizing Bootstrap 4 along with Bootstrap Tags Input to create a multiple category selection feature. My goal is to enable users to choose multiple items exclusively from the predefined categories listed in the predefined_list. At pres ...

javascriptjqueryhtmlbootstrap-4bootstrap-tags-input

`Overlapping navigation against a backdrop of backstretch image`

Is there a way to make the navigation display in front of the background image? Currently, the navigation becomes un-clickable and is hidden behind the image once it loads. ...

cssimage

Issue with [rowHovered] directive in PrimeNG Table when cell-background is defined

I am working with a scrollable TreeTable where I have defined the rowHover attribute in the following manner: <p-treeTable [value]="items" [columns]="scrollableCols" [resizableColumns]="true" [frozenColumns]="frozenCols" [scrollable]="true" scrollHeigh ...

htmlcssangularprimeng

Fixing the background transition issue on Safari is a common problem that many users encounter

My background image, which is overlaid with a gradient, does not show up on Safari (although it works perfectly on Chrome). body{ background:linear-gradient(rgba(0, 0, 0, 0.95),rgb(0, 0, 0, 0.95)),url("https://www.w3schools.com/cssref/img_tree.gif" ...

htmlcss