Utilizing Bootstrap to allow for seamless text wrapping around a text input field

I am trying to implement a "fill-in-the-blank" feature using Bootstrap, where users need to enter a missing word to complete a sentence.

Is there a way to align the text input horizontally and have the rest of the sentence wrap around it?

This is my current code snippet:

elit at imperdiet dui accumsan <form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" id="textInput" placeholder="...">
  </div>
</form> sit amet nulla facilisi morbi tempus iaculis urna id volutpat

Here is a preview of how it appears (with text input separated by line breaks):

https://i.sstatic.net/NRI7J.png

You can view the complete implementation on this fiddle: https://jsfiddle.net/f58hzou3/

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

Here's a solution that might help you out. Enclose all the text within the .form-group class. I added the .d-inline class to both the .form-inline and .form-group classes to make the text display inline. Give it a try and see if it works for you.

Don't forget to check out my example on codepen

<div class="col-md-6">
  <form class="form-inline d-inline">
    <p class="form-group d-inline ">
      1. elit at imperdiet dui accumsan
      <input type="text" class="form-control mx-2" id="textInput" placeholder="Fill the gap"> sit amet nulla facilisi morbi tempus iaculis urna id volutpat.
    </p>
  </form>
</div>

Answer №2

Insert the provided text into the form

<form class="form-inline">
Lorem ipsum dolor sit amet, consectetur adipiscing elit at imperdiet dui accumsan 
  <div class="form-group mx-2">
    <input type="text" class="form-control" id="textInput" placeholder="...">
  </div>
quisque sit amet nulla facilisi morbi tempus iaculis urna id volutpat
</form>

https://jsfiddle.net/9fmtwL7n/

Answer №3

Sorry if I misunderstood your request. English is not my first language, but it seems like you're looking to have everything arranged in a single line?

.ok {
    display: flex;
}
.ok div {
    white-space: nowrap;
}
<div class="ok">
<div>elit at imperdiet dui accumsan</div> <form class="form-inline">
  <div class="form-group">
    <input type="text" class="form-control" id="textInput" placeholder="...">
  </div>
</form><div>sit amet nulla facilisi morbi tempus iaculis urna id volutpat</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

Save the status of checkboxes in a JSON file using boolean values of true or false

When a user submits a form, I am retrieving the values of checkboxes and storing them as an array. The simplified form structure is as follows: <!-- gym_create.html - other input fields are omitted for brevity --> <form class="create-gym" role=" ...

javascriptjqueryjsonmeteor

Sorting through mongoose information on the front end using EJS depending on a dropdown pick

Beginner embarking on my inaugural project here. I have developed 2 Mongoose schematics and models for managing categories and products. The products are nested within the corresponding categories model. Using Node and Express, I successfully sent all ca ...

javascripthtmlexpressmongooseejs

Setting up conditional select options in Angular

I need to create a select list with specific options based on the data in an object. For instance, if the data property is 0, I want to display an option as 0 with the ability to switch to 1, and vice versa. However, when rendered in HTML, no option value ...

htmlangularselecthtml-select

I encountered a CORS policy error while using React. What steps can I take to effectively manage and resolve this

INDEX.JS import express from "express"; import { APP_PORT } from "./config"; import db from "./database"; import cors from "cors"; import bodyParser from "body-parser"; import Routes from "./routes&quo ...

javascriptnode.jsreactjsmongodbexpress

What is the process of sending data to another JSP page via AJAX when submitting data to a link within a JSP page?

I am facing an issue with forwarding data from a URL link in a JSP form page to another JSP page after submitting the form. How can I achieve this successfully? index.jsp <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> ...

javascriptjqueryajaxapijsp

Using a HTML value as an argument in a React component

Can someone help me figure out how to pass an HTML value as a parameter for my function? Here is the code snippet I have: <input type ="text" placeholder="Smart Contract Bytecode" name="name" id ="scbytecode" className="nice-textbox"/> <button i ...

htmlreactjsparameters

Finding the absolute root path of a npm package in Node.js

Objective I am on a quest to find a reliable method to ascertain the absolute root path of an npm package that has been installed in Node.js. Challenge Although I am aware of require.resolve, it only provides the entry point (path to the main module) an ...

javascriptnode.jspathnpmpackage

What is the best way to eliminate a vertical line from the canvas in react-chartjs-2?

Can someone please lend me a hand? I've been working on a project in React JS that involves using react-chartjs-2 to display charts. I'm trying to incorporate a range slider for the chart to manipulate values on the x-axis, as well as two vertic ...

javascriptreactjshtml5-canvaschart.jsreact-chartjs

Crockford's method of replacing values with nested objects

/** Custom Supplant Method **/ String.prototype.customSupplant = function(obj) { return this.replace (/{([^{}]*)}/g, function (match, propPath) { var props = propPath.split('.'); var result = obj; f ...

javascript

Concealing axis lines within the initial circular grid or opting not to include them

Is there a way to incorporate some whitespace within the center circle of the radar chart? I'm aiming for the axis to commence at 1 radius (the initial circular line) or perhaps have the stoke set to 0 for the primary radius. Any assistance would be g ...

javascriptcssreactjsd3.js

Slideshow plugin glitch on Safari and Opera caused by jQuery implementation

My current project involves utilizing a fantastic plugin called Sequence.js for creating animations and transitions with CSS3 based on jQuery. I have set up a simple responsive fadeIn-fadeOut slideshow using this plugin. While everything works smoothly an ...

jquerycsssafarislideshowopera

Is it possible for the relative path of a gif image to become invalid when added to a div?

Question Context: In the view, I have a form that will show a loading 'spinner' gif when a user submits it. The Problem: If I place the spinner img element within its container div, the spinner is always displayed, which is not desired: https ...

javascriptjqueryhtmlasp.net-mvcrazor

Refreshing page using jQuery following an AJAX request

My script is functioning properly, however the use of location.reload(); does not seem to be effective. I am aiming to refresh the page after deselecting the last checkbox. $(".catcf, .coursetype, .yearcf, .manthcf, .venucf").on('click' ...

htmljqueryajax

Assigning the "action" attribute of a form to direct to the homepage

Working on a login form, I've encountered an issue with the action attribute when set to "index.cfm". This seems to work fine for all other pages except for the index page. Looking for some insights if anyone else has faced this problem before. I&apos ...

htmlformscoldfusion

Guide to utilizing exact matching functionality in ExpressJs router

In my ExpressJs application, I have defined two routes like so: router.get("/task/", Controller.retrieveAll); router.get("/task/seed/", Controller.seed); When I make a request to /task/seed/, the Controller.retrieveAll function is call ...

javascriptnode.jsexpressbackendrouter

What is the best way to explain the concept of HTML5?

While reading a question on Stack Overflow, I came across a comment that stated: HTML5 is equal to HTML(5) + CSS3 + JavaScript. This statement truly caught me by surprise. Can it really be argued that HTML5 can be broken down into HTML(5), CSS3, and Ja ...

html

Spinning objects in three.js using tween.js to move around the global axis

Currently, I am working on tween-rotating a 3D cube. Thanks to this helpful post (How to rotate a object on axis world three.js?), I have successfully achieved rotation without any issues. Now, my goal is to transfer the rotation achieved through setFromRo ...

javascriptrotationthree.jstween

CSS fails to display image within PHP script

Having an issue with displaying CSS through a PHP file. Everything seems to be working fine until I try to display an image from the database. The source code does accept the value from the DB, but the image doesn't show up. Interestingly, the image d ...

phpcssimage

Replacing elements with preg_replace in HTML including diacritics

Can someone assist me in using preg_replace for the following scenario: <p style="background:white"> <span style="font-size:10.0pt;font-family:&quot;Trebuchet MS&quot;,&quot;sans-serif&quot;"> Coût de la prestation : 43.19 . ...

phphtmlpreg-replacediacritics

Moving elements using CSS

Hi, I've been facing this issue with my web development since the start. Whenever I zoom in, the container also moves along. Is there any way to fix this problem? .darkslidecont{ width: 200px; height: 50px; position: relative; bac ...

htmlcss