Add-on Group for Form Inputs - Is a style element missing? (Bootstrap 4)

I am looking for a way to incorporate a Bootstrap4 input group label between two input fields. While there are "prepend" and "append" styles available, in this scenario, I require a "center" style which seems to be missing. Does anyone have a solution for this?

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

The requirement dictates that the corners of the element should not be rounded. It is crucial that we find a solution using only pre-defined bs4 classes and styles, without any local style="..." elements. Any ideas on how to achieve this? Thank you!

        

<div class="form-group col-6">
   <div class="input-group">
     <div class="input-group-prepend">
       <span class="input-group-text">Date interval:</span>
     </div>
     <input type="text" class="form-control" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
     <span class="input-group-text">-</span>
     <input type="text" class="form-control" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
  </div>
</div>

htmlcssformsbootstrap-4

Answer №1

Bootstrap has a variety of border classes available.

The rounded edges are achieved through the CSS property known as border-radius.

If you're looking to utilize Bootstrap's border classes, these are the ones you'll want to focus on:

  1. rounded-left (creates rounded corners on the left side)
  2. rounded-0 (Equivalent to border-radius: 0px; - meaning no rounded corners)
  3. rounded-right (produces rounded corners on the right side)

To achieve your desired look, simply apply these classes to the elements.

For further information on Bootstrap border classes, check out this link here.

Example Snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-10">
   <div class="input-group">
     <div class="input-group-prepend">
       <span class="input-group-text rounded-left">Date interval:</span>
     </div>
     <input type="text" class="form-control rounded-0" name="dateFrom" placeholder="YYYY-MM-DD" value="2020-05-19">
     <span class="input-group-text rounded-0">-</span>
     <input type="text" class="form-control rounded-right" name="dateTo" placeholder="YYYY-MM-DD" value="2020-06-19">
  </div>
</div>

View Codepen Example here.

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

Words existing outside of an element

Currently, I am developing a slider using Bootstrap, and I have encountered an issue where the text displays on the left instead of aligning to the center in relation to the elements. To see this issue in action, you can check out the live demo here: In ...

htmlcsstwitter-bootstrap

Having issues with implementing the Bootstrap form-check-inline feature

I have been attempting to utilize the form-check-inline feature from Bootstrap Forms without success, as it seems to be stacking checkboxes vertically instead of inline: https://i.sstatic.net/paLTC.png This is the code snippet I am working with: <h1& ...

htmlcssbootstrap-4

CSS Flexbox - Choose all elements that appear at the start of a new line (Wrap)

Is there a CSS selector that can prevent content insertion on new lines when using the wrap feature in CSS-Flexbox? I am utilizing CSS-Flexbox for a layout with the wrap option, but I do not know the number of lines beforehand. I need a solution where the ...

cssflexbox

What is the best way to make a CSS element move with Javascript?

Currently working on a JavaScript game where I am in need of a CSS object to replace the original JavaScript object. Specifically, I want my "sword" CSS object to move along with my player object when it is Unsheathead. All the examples I find only show wh ...

javascripthtmlcss

update the markers on a leafletjs map

I am aiming to create a dynamic map with markers that update every 10 minutes. The marker positions are stored in a spreadsheet document that is regularly updated. After successfully retrieving the data from the spreadsheet and positioning the markers in ...

javascripthtmlmappingspreadsheet

The issue with jqTransform not displaying the select box value on a hidden contact form

Could really use some assistance here and apologize if it's a hassle: Link to contact form To view the contact form, simply click the "Contact" button in the top left corner. The jqTransform jQuery plugin is being used to style it. Initially, it&apo ...

javascriptjquerycsscontact-form

Content is being clipped due to an overflow that hides the scroll bar

I've encountered an issue with the code below. It seems that when the title element is included, the content gets clipped at the bottom of the scroll. However, if I remove the title element, there is no cutoff of content. The positioning of the title ...

htmlcss

Create a dynamic animation using Angular to smoothly move a div element across the

I currently have a div with the following content: <div ng-style="{'left': PageMap.ColumnWrap.OverviewPanelLeft + 'px'}"></div> Whenever I press the right key, an event is triggered to change the PageMap.ColumnWrap.Overvie ...

javascripthtmlcssangularjs

Calculating the sum of fields added dynamically using jQuery

I am currently working on a dynamic table where I can add rows dynamically. However, I am facing an issue in including a subtotal at the bottom of the table. This is what I have tried so far: Here is the JavaScript code snippet: $(document).on('chan ...

javascriptjqueryhtmlarrays

Guide on adding a personalized table or Div section in a datatable

I am looking to add a custom table above a datatable, specifically I want the custom table to be displayed above the header columns. Here is the code I have tried: columns: [ { "data": "WorkFlowType" }, { "data": "WorkflowInstanceId" } ...

javascriptjqueryhtmldatatable

How to Spin an Image in the Canvas Using HTML5

I am having trouble rotating an image inside a canvas after researching similar questions on Stack Overflow. Here's what I've learned: It seems I cannot rotate a single object inside the canvas. I can only rotate the entire canvas itself. ...

javascripthtmlcanvas

Eliminate a targeted class from an HTML string in PHP

I am dealing with a string that looks like this: $string = '<img class="img-responsive animate scale animated" src="image/catalog/blocks/about-banner.jpg" alt="">'; My goal is to delete the img-responsive class from it. Any suggestions o ...

phphtml

My media queries refuse to cooperate until I add the magical "!important" declaration

Utilizing Bootstrap 4 along with a custom CSS file on my website. Within the CSS file, I have included some media queries at the bottom: @media (max-width: 575px) { .address .contact { text-align: center; } } /* Small devices (tablets, 768px and ...

cssbootstrap-4media-queries

The active link color for navigation in Bootstrap 4

I am trying to update the active menu links to display in green on my website. Despite various attempts, I have not been successful in changing the color. Can anyone provide guidance on how to proceed? My website is built with Bootstrap 4 and mdbootstrap. ...

cssbootstrap-4navigationbar

Removing margins from the footer and header after adding a video background: A step-by-step guide

After implementing a video as the background of my HTML project, I noticed some margins appearing on the right side of the header and footer. Despite following advice to set "margin: 0" in my CSS for the Body element, the issue persists. You can view the ...

csshtml

The reverse animation for .is-exiting in Smoothstate.js is not triggering

I've been searching for a solution to my issue but haven't had any luck finding one that works for me. Currently, I am using smoothstate.js to trigger animations when the page loads and ideally reverse them when the page exits. However, while th ...

jquerycsssmoothstate.js

Transitioning between sections by clicking on a navigation menu item

I'm looking to create a cool animation effect on my website. When a user clicks on a specific menu link, such as "about-section," I want the page to smoothly scroll down to that section in a parallax style. If anyone knows of a jQuery plugin that cou ...

jqueryhtmlcssjquery-pluginsparallax

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

javascriptjqueryhtmlangularjs

I require assistance on how to properly arrange images in a div so that they stack

I'm having an issue with arranging a series of images within a div where they stack on top of each other. The div has a CSS width of 450px, and the top image always matches this width. Subsequent images vary in size and need to be aligned flush right ...

css

The Chart feature in the ASP.NET WebHelpers Library

My goal was to incorporate a chart from the webhelpers library into my Visual Studio Webforms project. When I click the button, the chart should appear on the page. However, when I click the button, the chart takes over the entire page, causing the buttons ...

c#htmlasp.net