doubled border within an input group at the center

I am currently utilizing the bootstrap 4 input-group feature with a modified border-width set at 10px. However, I have noticed that the border width in the center appears to be doubling up:

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

Is there a way to ensure that the middle border matches the width of the side borders?

.input-text {
  border-width: 10px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
    <div class="row justify-content-center">
        <div class="col-lg-9 col-12">
            <div class="input-group">
                <input type="text" class="form-control input-text">
                <input type="text" class="form-control input-text">
                <div class="input-group-append">
                    <button type="submit" class="btn">Go</button>
                </div>
            </div>
        </div>
    </div>
</div>

csstwitter-bootstrapbootstrap-4

Answer №1

Customize the left and right border of the first and second input fields

.input-text {
  border-width: 10px !important;
}

.input-text.first {
  border-right-width: 5px !important;
}

.input-text.second {
  border-left-width: 5px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="centered-query">
  <div class="row justify-content-center">
    <div class="col-lg-9 col-12">
      <div class="input-group">
        <input type="text" class="form-control input-text first">
        <input type="text" class="form-control input-text second">
        <div class="input-group-append">
          <button type="submit" class="btn">Go</button>
        </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

running a WordPress website on a local server

I'm currently facing an issue with exporting my WordPress website locally. When I try to export it, I get an XML file, but with the All in One WP Migration plugin, it gives me a "WPRESS" file instead. I don't have the budget to pay for a business ...

htmlcssmysqlwordpresshosting

Error Message: "Django Unable to Locate Global Static Files"

I am currently working on setting up a global CSS file for my project, and although it seems to be correctly referenced in the location, the file itself cannot be found. The relevant part of my settings.py file looks like this: BASE_DIR = os.path.dirname ...

htmlcssdjangodjango-staticfilesstatic-files

Exploring the world of MVC4: Enhancing user experience with client-side

Solution: The answer provided by @www.innovacall.com is correct, I initially misunderstood it but now it works perfectly. Thank you for the help. Initial issue: I have been struggling with finding a solution to my problem. In my project, there is a mod ...

javascriptjqueryajaxasp.net-mvc-4twitter-bootstrap

Ensure that the headers of the table are in perfect alignment with the

Is there a way to create a table with fixed row headers so that column headings stay in place while scrolling? I've managed to achieve this, but now the table headers are not aligned properly with the rows below. I've also created a helpful jsfid ...

htmlcss

Height of columns in Bootstrap 4 grid layout using row-cols

I am faced with a challenge while using the bootstrap grid system with the row-col attribute. The issue is that when columns wrap, they do not maintain the height of the tallest columns from the previous rows. Is there a way to ensure that the wrapped colu ...

cssbootstrap-4

Any ideas on how to add animation to this Raphael SVG Skillbar project?

I'm interested in using the Raphael Diagram Skillbar as shown in this link: HERE However, I would like to add animation to each line similar to what is shown here: (animation at start position) HERE Does anyone know how I can achieve that effect? ...

jquerycssanimationsvgraphael

When clicking on a Bootstrap button, there is no visible outline

I've come across numerous examples of Bootstrap buttons where I can click on them and they display an outline. Despite my attempts to replicate this, my button doesn't show the outline as intended. What could be causing this issue? <!-- Bo ...

htmlcssbootstrap-5

Is AJAX the best way to resize a div on button click?

I am seeking to dynamically change the size of a div element on the client-side. By default, its height is set to 500px, but I want it to increase to 700px when a button is clicked. This task involves an ASP.NET website. I have been instructed to accompl ...

javascriptasp.netjquerycssajax

Creating a vertical line at the bottom using CSS

Is it possible to add a centered line to the bottom of the "numberCircle" in a responsive table created with twitter-bootstrap? I would like it to look like this image: https://i.sstatic.net/WKgFu.jpg Thank you .numberCircle { border-radius: 50%; ...

htmlcsstwitter-bootstrap-3

Styling the first child element within a list using the li tag

<ul> <li class="bla">aaa</li> <li class="my_li">sss</li> <li class="my_li">ddd</li> <li class="my_li">fff</li> </ul> css: .my_li:first-child{ ...

htmlcss

CSS an act of misbehavior

I have noticed some unusual behavior on my website page. My website design can be viewed at Also, here is the same design in CMS format Please pay attention to the section under <div class="godelpage"> <a href="http://ryugaku.babonmultimedia ...

htmlcss

How do I resolve the problem of Bootstrap column heights? Setting columns to have an automatic height in Bootstrap grid

Currently working on a website and encountering an issue that needs to be resolved. I have included some reference photos below to illustrate the problem: We are getting this We want this. Thank you in advance for your help. When attempting to set the h ...

cssbootstrap-4

Add a circular transition effect to Font Awesome icons

Check out my code snippet on JSFIDDLE: https://jsfiddle.net/8f3vLh0a/14/ I am using font awesome icons and I would like to add a circling effect on hover similar to this demo: http://tympanus.net/Tutorials/ResponsiveRetinaReadyMenu/ How can I implement t ...

htmlcss

Tips for aligning a button in the center of an image across different screen sizes using CSS or bootstrap

I currently have a centered button on my hero image, but the issue is that I would need to use multiple media queries to ensure it stays centered on all screen sizes. <style> .hero-container{ position: relative; text-align: center; } .her ...

htmlcssbootstrap-5

Align the content evenly on several cards using Material-UI

Trying to work on some frontend coding, but struggling with getting the content justified properly in fixed-height MUI cards. Each card consists of a title, description, divider, and author, but I can't seem to get everything aligned correctly within ...

cssreactjsmaterial-ui

Limiting the size of images within a specific section using CSS

When using CSS, I know how to resize images with the code snippets below: img {width:100%; height: auto; } img {max-width: 600px} While this method works effectively, it applies to every image on the page. What I really need is for some images to be ...

javascripthtmlcss

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

The outerHeight of Elements measured in pixels

Is there a way to increase the outerHeight() function by adding extra pixels? Let's say we have a variable storing the outerHeight of .pg-sect: var $section = $('.pg-sect').outerHeight(); Now, if I want to add an additional 70px to the he ...

javascriptjqueryhtmlcss

The items in my bootstrap drop-down menu are unresponsive when clicked

Seeking assistance with my Django project – I encountered an issue where my drop-down menu stops working when including a locally hosted bootstrap.min.css file. While learning Django, I followed a tutorial that used CDN to include Bootstrap, but due to i ...

djangobootstrap-4

Safari not functioning properly with CSS flip card and link combo

I am looking to create a CSS flip card that rotates in 3D on mouse hover, similar to the one showcased on W3Schools. My main requirement is to have a clickable link on the back side of the card. While there are no issues with the latest versions of Chrome ...

htmlcsssafari