How about a group-input containing a element added in the center?

Looking to insert a prepend element between two input elements without relying on extra CSS tricks. Is it possible to achieve this using just Bootstrap and without any additional CSS?

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group input-group-sm m-4 w-50">
  <input class="form-control" type="text">
  <div class="input-group-prepend">
    <div class="input-group-text">@</div>
  </div>
  <input class="form-control"></input>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

It couldn't be easier.

All you have to do is combine the classes input-group-prepend and input-group-append.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group input-group-sm w-50 m-4">
  <input class="form-control" type="text">
  <div class="input-group-prepend input-group-append">
    <div class="input-group-text">@</div>
  </div>
  <input class="form-control"></input>
</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

Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width. I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens. Additiona ...

htmlcssresponsive-design

What strategies can I use to keep text-area from wrapping onto a new line?

I'm having trouble with styling my description column <template v-slot:item.description="{ item }" class="description" style="overflow-wrap: normal"> {{ item.description }} </template> CSS <style scoped> ...

cssvue.jsvuejs2vue-componentvuetify.js

Navigating Through Tabs in Bootstrap 4

I am currently working on a scrolling tab feature and encountering an issue. I am unable to click on the middle tabs as the scrolling movement is too abrupt when using the right button. How can I adjust the code to allow for a smoother scroll of the tabs? ...

javascriptjqueryhtmlcssbootstrap-4

Changing the Div heights in Material UI with grid layout customization

I have a project that requires me to implement material-ui. Is there a way I can adjust the width and height of the div containing the "Sign In With" text (as shown in the first image) to bring the buttons closer to the text? Transformation from this: ht ...

javascriptcssreactjsmaterial-uistyled-components

Sleek animation designed for a personalized cursor when hovering over an object

I'm currently working on improving the transition of the cursor for a smoother experience. Right now, the size abruptly changes when hovered over the target element. Any suggestions on how I can achieve a smoother increase in size, with a better anima ...

javascripthtmlcss

One of the paragraphs refuses to align with the others by floating left

Greetings everyone! This is my first time posting here, although I have been a regular visitor looking for answers on this site. Hopefully, someone can assist me with my current issue. Let me explain my problem: I've been attempting to align all the ...

htmlcsscss-float

Optimizing Animation Effects: Tips for Improving jQuery and CSS Transitions Performance

Wouldn't it be cool to have a magic line that follows your mouse as you navigate through the header menu? Take a look at this example: It works seamlessly and smoothly. I tried implementing a similar jQuery script myself, but it's not as smoot ...

javascriptjqueryhtmlcss

What is the best way to incorporate this video into this particular frame?

Does anyone know how to insert an image with a specific shape using SVG? I have the exact shape I want in an SVG file. Do I need to use relative or absolute positioning with respect to the SVG, or are there other solutions available? <svg width="90 ...

csssvg

fixed divs that remain in place while scrolling

In the past, I have implemented a method similar to this: However, I am not a fan of the "flicker" effect that occurs when the page is scrolled and the div needs to move along with it. Recently, I have come across websites where certain elements (such as ...

cssscrollcss-position

Show side by side using javascript

My dilemma lies in having a set of cards that are meant to be displayed inline, but I have to initially hide them using "display: none". When a specific button is clicked, I aim to reveal these cards; however, upon doing so, each card seems to occupy its o ...

javascriptcssbootstrap-4

Creating a sleek CSS drop-down navigation menu

I seem to be facing an issue with the side navigation drop down menu. Below are the link and CSS code: <nav id="nav"> <div class="menu-main_nav-container"><ul id="menu-main_nav" class="menu"><li id="menu-item-270" class="menu-it ...

cssnavigation

Efficiently formatting text in a div container

How can I ensure that the text within a span is word-wrapped inside a div? https://i.sstatic.net/W691d.png Here is the code snippet: <div class="col-xs-6 choice btn btn-default" > <span class="pull-left">(Kepala) Bagian Purchasing (not lis ...

csstwitter-bootstrap-3

Unable to achieve full width for a div within a scrollable container

Currently, I am in the process of constructing a new website using Gatsby.js. However, I have encountered a minor issue with some CSS related to code blocks. Since CSS is not my strong suit, I have been unable to resolve it thus far. Below is a runnable sn ...

htmlcss

How to position text in the center of an image and ensure it is responsive?

I am currently in the process of trying to center the text "WHAT" over the image in col-2. <div class="row"> <div class="col-2"> <div class="stackParent"> <img class="stack-Img" ...

javascripthtmlcssbootstrap-5

What steps should I follow to produce animation in my specific situation?

I've been attempting to implement a transition for my elements, but the examples I've come across all rely on the :hover state. What I really need is for the transition to activate when I click a link. Here's my HTML: html <a id=' ...

jqueryhtmlcssanimation

Customizing Nav Bar Font Color with Bootstrap4

After numerous attempts, I still haven't been successful in changing the color of my navigation bar buttons. Being a beginner in using Bootstrap, I am struggling to figure out how to customize my website using CSS in addition to Bootstrap. In my late ...

bootstrap-4

Issue with Material UI styles not applied in component (alert: multiple occurrences of `@material-ui/styles`)

I have developed a standalone React component that utilizes the Material UI (4.8.3) library and have uploaded it to a private NPM package for use across various applications. The standalone component project is functioning properly (tested using Storybook ...

javascriptcssreactjsmaterial-ui

Exploring the capabilities of the Twitter API Search functionality

I'm looking to find tweets that mention @WWE. I tried following this guide: Following their steps led me to this URL: However, instead of receiving the JSON data as expected, I'm encountering this error: {"errors":[{"message":"Bad Authenticati ...

jsontwitter-bootstraptwitter

Is there a way to uncover the original source of a background image data?

I came across a website with an image that caught my eye. However, upon inspecting the source code with firebug, I discovered that it was not an actual image, but a div with the following CSS condition: background-image: url("data:image/gif;base64,R0lGODl ...

cssbase64background-imagedata-uri

Is it possible to include padding within a textarea element?

Is it possible to add some left margin inside a textarea? I would like there to be some extra space because I am using an image icon as my button within the textarea, and when I type, the words end up covering the image. <div id="inputBox"> < ...

htmlcss