Adding text in front of an input field can be achieved by using the placeholder attribute

I'm struggling to insert text on the left side of an input field and beneath a label.

Working with Bootstrap 4.3.1, my HTML code appears as follows:

<div class="col-lg-6 col-md-6 col-sm-6">
<!-- some markup in here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
    <div class="row">
        <label>Sensor URI:</label>
            http://<input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/>
    </div>
</div>

This layout resembles the following:

https://i.sstatic.net/gRdJD.jpg

I've experimented with enclosing "http://" in various elements (such as <p>, div>, etc.) but have had no success. The desired outcome is to have "http://" in front of the input field, preventing the user from editing it, similar to this illustration:

https://i.sstatic.net/9QhuM.jpg

What would be the correct approach to achieve this?

htmlcssbootstrap-4

Answer №1

To achieve the desired outcome, follow these 2 steps:

  1. Apply the form-control-inline class to the input element for it to be displayed in line with the "http://" text.
  2. Enclose both the input and text within a block element like a <div> to ensure they appear on a separate line below the label.
  • Note: An extra row div without any cols is invalid, so it has been removed in the example below.

View a functional snippet here:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="col-lg-6 col-md-6 col-sm-6">
  <!-- Some HTML markup goes here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
  <label>Sensor URI:</label>
  <div class="inputwrapper">http:// <input value=" " type="text " id="sensor_uri " min="15 " max="1440 " class="form-control-inline" required/>
    </div>
</div>

Answer №2

Include grids within a row to organize labels and input fields

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <div class="col-lg-6 col-md-6 col-sm-6">
<!-- additional markup could be placed here -->
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
    <div class="row">
      <div class="col-md-12">   <label>Sensor URI:</label></div>
          <div class="col-sm-2 col-xs-2">     http://  </div> <div class="col-sm-10 col-xs-10"><input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required/> </div>
    </div>
</div>

Answer №3

What are your thoughts on using flexbox for layout?

<div class='container'>
<div>
    <label>Sensor URI:</label>
</div>
<div>
    <span>http://</span>
    <input value="" type="text" id="sensor_uri" min="15" max="1440" class="form-control" required />
</div>

Here is the corresponding CSS code:

.container {
display: flex;
flex-direction: row;
}

Answer №4

Check out this snippet of code: I have a great suggestion that may help you achieve your goal.


<div class="col-md-6 my-3">
      <label class="sr-only" for="inlineFormInputEmail">Email</label>
      <input type="email" class="form-control" id="inlineFormInputEmail" placeholder="Your email">
    </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

Struggling to apply size in percentage to several images used as a background

Displaying two background images with different positioning: html { background: top left no-repeat url(http://wallpapers.pupazzo.org/animals/Peek-a-Boo_Red_Fox_Kit.jpg), top right no-repeat url(http://www.dcwild.com/images/Fox-Kit-Rive ...

css

What is the best way to create a new variable depending on the status of a button being disabled or enabled

Imagine a scenario where a button toggles between being disabled when the condition is false (opacity: 0.3) and enabled when the condition is true (opacity: 1). Let's set aside the actual condition for now -- what if I want to determine when the butt ...

javascriptcssreactjsnext.js

What is the best choice for my CSS: creating a block or an element using BEM methodology

** According to the official BEM website ** Create a block: If a section of code can be reused and does not rely on other page components being implemented. Create an element: If a section of code cannot be used separately without the parent entity (the ...

htmlcssnamingbemmethodology

Refresh the webpage source code for an AJAX request

When using AJAX calls on a page, I have noticed that the page source remains unchanged. This can be problematic if a user performs forward/backward operations in their browser, as the browser will display the original HTML code instead of the updated conte ...

javascripthtmlajaxreload

The container struggles to contain the excess of images spilling over

I'm having trouble getting a group of images to stay within their container in a grid layout, as they're overflowing vertically beyond the container's boundaries. Is there a way to adjust their size so they match the height of their parent ...

htmlcssangularflexbox

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...

phpjavascripthtmlvalidationencode

Experiencing a hiccup in your jQuery animation?

Click here to access the fiddle demonstrating the issue. A situation arises where a span with display: inline-block houses another span that is being slowly hidden. The container span unexpectedly shifts back to its original position once the hiding proces ...

javascriptjquerycss

Embed a physical entity within another physical entity

On my webpage, I have 2 toggle buttons - "Leaderboard" and "MedalTally". The layout looks like this: https://i.sstatic.net/IohqA.png Here are the codes for the above page: *, *:before, *:after { box-sizing: border-box; } html { overflow-y: scrol ...

javascriptjqueryhtmlmysqlcss

injecting the value of this.value into an HTML input markup using JavaScript's insertCell function

Having a bit of trouble with a JavaScript function that creates a table and inserts a cell using insertCell(0); In this cell, there's an HTML form input that triggers another function onKeyUp, where I pass in 4 parameters. However, the last parameter ...

javascriptjqueryhtml

What is Causing The Card to Not Expand?

I wanted to enhance my project by incorporating a responsive card template, so I turned to one of the templates on CodePen for help. However, after copying the code into my own platform, I encountered an issue where the card wouldn't expand when click ...

javascripthtmlcss

I am trying to verify my code, but the messages are not displaying under the username. They only appear under the password field. I am not sure where I have made a mistake

Having trouble with my login form validation using jQuery. Can someone help me fix it? $(document).ready(function() { $("#form1").validate({ rules: { username: { required: true, minlength: 6 }, password: { ...

htmljquerycss

Extracting URLs using Selenium from specific cells within a table

While parsing a webpage table, I noticed that one of the columns contains a hyperlink. The structure of the table is as follows: <table id="GridView1"> <tbody> <tr> ... </tr> <tr> ...

pythonhtmlseleniumpandas

A concealed Cytoscape chart will not be able to show up at a later time

There are two Bootstrap columns on my webpage, each with a width of 6 out of 12. The left column contains buttons, while the right column holds a Cytoscape graph initialized with 5 nodes. Upon page load completion, the Cytoscape graph is initially set to ...

jqueryhtmltwitter-bootstrapcytoscape.jscytoscape

Which is better for parsing HTML - CSS or XPath selectors?

For my project, I aim to utilize lxml for parsing HTML content, as it offers support for both XPath and CSS selectors. I am currently deciding whether to bind my model properties to either CSS or XPath. I am contemplating which option would be most benefi ...

htmlcssparsingxpathcss-selectors

A comprehensive guide to effectively formatting Recharts in React: addressing alignment and size management!

While attempting to style two graphs as floating cards, I am encountering difficulties in controlling the sizing and centering of the graphs. Specifically, I am having trouble with the pie chart in this example. To address this issue, I am passing paramete ...

javascriptcssreactjsrecharts

Having trouble with Jquery CSS transform not functioning properly in Internet Explorer 8?

When it comes to utilizing CSS3 features that are not supported by older browsers such as IE8, I tend to apply them using jQuery instead. However, I have noticed that the CSS transform in jQuery does not work... Here is my code: http://codepen.io/vincentc ...

jquerycss

What is the best way to smoothly transition an element into view, then make it disappear seamlessly by fading it

Issue My current code features a <button> that, upon a single click, updates the class of a <div> element to "fade-in" and inserts it into the DOM. This action causes the <div> to visually fade in once it's in the DOM. However, if I ...

javascripthtmlcsscss-animations

Dynamically loading a webpage with an element roster

I have a list and I want it so that when a user clicks on the sport1 list item, results from the database table sport1 will be displayed. Similarly, if they click on the education1 list item, results from the education1 table should be shown. The issue i ...

javascriptphphtmlmysqlajax

Adding custom HTML platform views in the latest version of Flutter for web development is a breeze

I need assistance adding a custom video with an HTML platform view to my Flutter web project using the 1.9 tech preview. I am having trouble locating the previous functions that allowed me to do this in the old flutter_web. I am looking for something simi ...

htmlflutterdartflutter-web

store user settings in local storage

After writing some code with a link that toggles text visibility upon click, I now want to incorporate saving this state in web storage so that it persists upon page reload. As a beginner in JavaScript and HTML, this task has proven challenging for me. Th ...

javascriptjqueryhtmllocal-storage