"Design an interface with multiple input fields spanning two lines using

Is there a way to create a form with multiple inputs, including checkboxes on the left and two lines for text input?

Here is the code snippet I am currently using:

<div class="container-fluid">
<div class="col-md-3">
    <div class="input-group">
        <div class="input-group-prepend">
            <div class="input-group-text">
                <input type="checkbox" id="idays">
            </div>
            <input type="text" class="form-control" id="days1" disabled="" maxlength="10">
            <input type="text" class="form-control" id="days2" disabled="" maxlength="10">
        </div>

    </div>
</div>

I am looking for something similar to this example for reference:

Check out this image of two inputs

htmljquerycsstwitter-bootstrapbootstrap-4

Answer №1

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-1 d-flex align-items-center justify-content-center">
      <input type="checkbox">
    </div>
    <div class="col-11 pl-0">
      <div class="row">
        <div class="col-12">Option A</div>
        <div class="col-12">Option B</div>
      </div>
    </div>
  </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

What's the best way to horizontally center an inline element within a block element using CSS?

I need help centering an inline element (like a span) within a fixed-width block element. The goal is to have the position of the inline element determine how the text is laid out in the block element. Here's an example: .container { ...

htmlcsscenter

The content on my HTML webpage exceeds the width of the screen on mobile devices and certain PCs

I've exhausted most of the solutions available online, yet I haven't been able to resolve the issue. The content on my webpage is appearing wider than the screen size on mobile devices and some PCs URL: html, body,{ max-width: 100%; ...

htmlcssresponsive-designoverflow

Text Changes Size when Expanding

Currently in the process of building a website and facing an issue with the banner placement under the navigation bar. Originally, both divs were perfectly positioned as desired but encountered a problem where upon resizing the browser window, the right di ...

htmlcss

Utilizing Font Awesome for social icons in a Vue component display

Currently, I'm in the process of building my own website and making the switch from traditional HTML, CSS, and JS to using VueJs. I've hit a roadblock when trying to transfer some code from my original HTML file to a Vue JS component, specificall ...

javascripthtmlvue.jswebfont-awesome

What steps do I need to take to build this jump page?

Disclaimer: I have very little experience with coding. As a self-taught graphic designer, I have only managed to create a simple page that helps me store common phrases I use frequently throughout the day. It was quite a challenge for me. I am currently w ...

javascripthtmljquerycss

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

Why isn't the Mat error functioning properly in this Angular code?

Could someone explain why the Mat error does not seem to be functioning properly in this Angular code snippet? <div class="form-group"> <mat-form-field class="row-styling"> <mat-label for="aplctnName"> Application Name <sp ...

htmlangularangular-forms

Website that substitutes every word on an external webpage

I'm looking to create a function similar to what's demonstrated on this site: which allows users to enter an address and view the page with all words replaced by a custom choice. Initially, I attempted this using iframes and jquery, but ran int ...

phpjavascriptjqueryhtmlxss

Ajax is bypassing the success:function callback

Currently, I am working on implementing a login feature using ajax, HTML, and PHP. After debugging the PHP code, everything seems fine as it returns the necessary JSON variable for the ajax call. Below is the AJAX function I have created: $(document).read ...

javascriptphpjqueryajax

Exploring the intricacies of using jquery text() with HTML Entities

I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...

javascriptjqueryhtmlhtml-entities

Extracting text from HTML elements using BeautifulSoup

I'm working with the following html code and I want to extract the text that comes after <b>Name in Thai</b>, specifically : this is what I want content = """ <html><body><b>Name of Bangkok Bus station:</b> <spa ...

pythonhtmlbeautifulsoup

Is there a way to pass an HTMLDivElement as a child in React components?

Scenario Currently, I am in the process of developing a React application (rails-react) where the main component is called GameTracker. Within this parent component, there are two child components: EquipmentPanel and PinnedPanels. To achieve a specific fu ...

htmlreactjsruby-on-railsreact-rails

The insertRule() function seems to be failing to add the rule as expected, yet no

I've encountered an issue where I'm attempting to directly insert a style rule into the head of a document. Although it successfully inserts the style element, the code itself does not get inserted. Strangely, there are no errors being thrown. v ...

javascripthtmlcssnodes

Connecting a CodeIgniter controller method from jQuery code in a view file located in a folder: A step-by-step guide

I have implemented the autocomplete plugin in jQuery like this: $(function(){ $("#username").autocomplete({ source: "http://localhost/websitename/index.php/admin/suggest_names" // path to the method in controller }); }); This is ...

phpjqueryautocompletecodeigniter-2

Creating objects with adjustable X and Y positions based on HTML Canvas dimensions

I'm in the process of developing a basic game that utilizes HTML5 Canvas technology. Within the canvas, I've incorporated multiple rectangles to enhance gameplay. However, one issue I've encountered is related to how I control the rectangl ...

javascripthtmlcsscanvashtml5-canvas

A step-by-step guide on confirming reCAPTCHA during a server request

SITUATION: In the past, I used a simple form submit with POST to "/login" to check my recaptcha. For security reasons, I need to change my implementation and am considering the following steps: 1) Using jQuery to submit the form. 2) Making a call to th ...

javascriptjquerynode.jsajaxrecaptcha

What could be causing this JavaScript code not to run?

Help needed! I'm a student struggling to diagnose the issue in my code. Whenever I click the buttons, nothing happens at all. I've tried debugging by isolating each function, but still can't seem to figure it out. I've searched through ...

javascripthtmlblogs

Using a function to invoke Highcharts

I am encountering a problem while trying to invoke a function that includes the code for generating a Highcharts chart. The error message I receive is: TypeError: $(...).highcharts is not a function data: (function() { I have double-checked that hig ...

javascripthtmlhighcharts

Performing an AJAX GET request to the API after a set time interval

The API is constantly updating with live values, so I am attempting to fetch the data every second and display it on the webpage. Although I used a GET request call every N seconds using set_interval(), the values only load once and do not update with eac ...

javascriptphpjqueryajaxapi

Ways to obtain every hyperlink from Google

I am attempting to extract all the links to songs that appear on the side of Google search results when searching for a specific band and album. For example: https://www.google.com/sesearch?q=disturbed+asylum&ie=utf-8&oe=utf-8 I have made several ...

javahtmlhyperlinkgoogle-search