Change the width of both text boxes

As a newcomer to designing HTML forms, I am looking to create a simple input-group where the width of the text boxes is different. Specifically, I want the surname textbox to be shorter and the FullName textbox to be longer. Can anyone provide guidance on how to achieve this?

<div class="row h-100">
 <div class="col">
   <div class="input-group">
          <div class="input-group-prepend">
              <span class="input-group-text" id="">First and last name</span>
           </div>
           <input type="text" id="surname" class="form-control" style="width:80px">
           <input type="text" id="FullName" class="form-control" style="width:100%">
     </div>
  </div>

cssbootstrap-4width

Answer №1

Check out this solution.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1N" crossorigin="anonymous">
<div class="row h-100">
  <div class="col">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text" id="">Enter your first and last name</span>
      </div>
      <input type="text" id="surname" class="form-control" placeholder="Mr" style="width:80px;flex-grow: 0;">
      <input type="text" id="FullName" class="form-control" placeholder="">
    </div>
  </div>

Answer №2

Don't forget to remove the placeholder enter code here in the surname field with the class="form-control"

<div class="row h-100">
    <div class="col">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="">First and last name</span>
        </div>
        <input type="text" id="surname" class="form-control" style="width:80px">
        <input type="text" id="FullName" class="form-control" style="width:100%">
      </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

Bootstrap 4 - Interactive horizontal timeline for optimal viewing on all devices

I'm working on creating a responsive horizontal timeline using Bootstrap 4 for my timeline and project. The code I've developed so far is working well in terms of being responsive. timeline.html <div className="container timeline-container"& ...

cssbootstrap-4timeline

I'm curious if there's a method to ensure that the content within a mat-card stays responsive

So I'm working with this mat-card: <mat-card> <mat-card-content> <div *ngFor="let siteSource of siteSources | paginate: { itemsPerPage: 5, currentPage: page};"> <site-details [site]='siteSource'></s ...

cssangulartypescriptangular-material

Tips for implementing active pagination state that persists even after refreshing the page

Currently using the Admin LTE theme and encountering an issue with its datatable. I would like the pagination tab to remain active even after a page refresh. Can anyone provide assistance with this? Here is the link to the pagination table: The image att ...

htmlcssbootstrap-4

Attempting to create a single function that can be utilized with numerous divs that share the same class in jQuery

Currently, I am working on creating a basic jquery gallery viewer. In my code, I have the following structure: <div class="photoset"> <img /> <img /> </div> <div class="photoset"> <img /> <img /> <i ...

javascriptjqueryhtmlcss

Combine table cells to improve readability on smaller screens

I currently have a setup designed for larger screens: <table> <thead> <tr> <th>title and image</th> <th>description</th> </tr> </thead> <tbody> ...

javascripthtmlcssresponsive-designhtml-table

Guide to creating a versatile bootstrap modal window in Vue.js

I need some assistance with creating a bootstrap modal window that provides a warning to the user before they take an action. The issue I am facing is that when I enter text into a field, close the modal, and then reopen it, the previous values are still t ...

twitter-bootstrapvue.jsmodal-dialogvuejs2bootstrap-4

vue-router: A guide to disabling the outline property of the CSS in router-link

I am having trouble disabling the outline of a css link element. I successfully disabled the outline of a regular link using a css class, but I am unable to do so with the <router-link> element. How can I disable the outline for this? .page-link, .p ...

cssvue.jsvue-router

Tips for separating the 'title' and 'icon' elements within Bootstrap panels?

I am currently working on integrating a FAQ section into my website (not yet live, so I cannot provide a link). However, I am facing some minor CSS issues that I am struggling to resolve. The problem lies in a panel that is meant to display as shown below: ...

htmlcssbootstrap-4accordionpanel

Is there a way to ensure that the header is centered at the top and the footer is centered at the bottom of every printed page, even when

Currently, I am utilizing spatie/browsershot to generate PDF documents within a Laravel project. While it offers convenient methods such as headerHtml and footerHtml for customization, there seems to be an issue with handling images. Specifically, only bas ...

htmlcsslaravelbrowsershot

showing a pair of divs in a split layout on the homepage

I have a partially split homepage with two sections using Twitter Bootstrap v5.1.3 for the layout. The left side consists of two divs, one for text and one for an image. These divs are contained within a flex-parent, giving them an inline-block appearance ...

htmlcssbootstrap-5

What is the best way to remove the box-shadow from a React-Bootstrap Dropdown Button?

I'm attempting to remove the box shadow or second border from the bootstrap dropdown button when it is clicked. I have been unable to identify the specific class responsible for this change. https://i.sstatic.net/9wxRm.png ...

bootstrap-4react-bootstrapbootstrap-5

The CSS selector seems to be malfunctioning

I am facing an issue with calling HTML elements from CSS using CSS selectors. It's strange that the class selectors work fine, but I'm unable to select the elements directly from CSS. Therefore, I had to assign them classes. What I aim to achiev ...

htmlcsscss-selectors

Implementing Bootstrap in Wordpress using functions.php

The code snippet below is stored in my functions.php file within a Child theme directory. <?php function theme_styles() { wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/bootstrap.min.css' ); wp_enqueue_ ...

phpjquerycsswordpresstwitter-bootstrap

What are some ways to personalize a scrollbar?

I am looking to customize the scrollbar within a div. I attempted to modify it using the code below, but I encountered difficulties when trying to change the scroll buttons and did not achieve my desired outcome. Additionally, this customization did not wo ...

javascripthtmlcss

Customizing a ng-template with my own HTML content - a step-by-step guide

As I work on creating a custom web component inspired by the accordion component from ng-bootstrap, I'm currently experimenting with the functionality. Feel free to test out the original component on stackblitz. One specific feature I am aiming for is ...

angularbootstrap-4web-componentng-bootstrap

CSS that creates a repeated background image sourced from an 'image map'

I have created an image map with coordinates and dimensions specified (apologies for the rough drawing...) https://i.sstatic.net/CxQAk.png The numbers represent x-coordinate, y-coordinate, width, and height. For instance, 5, 5, 25, 25 indicates that the ...

htmlcss

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

Aligning an Image Dynamically Inserted with JavaScript

I'm having trouble centering an image added via Javascript within a table using my embedded CSS. Can someone guide me on how to adjust the CSS to center the image in the table? I've tried setting the margin property to auto for the image, but it& ...

htmlcsshtml-tablecentering

The mobile navigation in HTML has a slight issue with the ::after pseudo-element, specifically within the

As I prepare to launch my website, I have made adjustments to the mobile layout by moving the navigation links to a navigation drawer. The template I am using included JavaScript scripts to handle this navigation change. However, I encountered an issue whe ...

javascriptcsshtmlmiva

Center JQuery within the current screen

My implementation of Jquery dialog is as follows: <body> <div id="comments_dialog"> Insert a comment <form> <input type="text" id="search" name="q"> </form> </div> .... </body> dialog = $( "#com ...

javascriptjqueryhtmlcss