Centering headings and form elements in Bootstrap

I have a bootstrap row with a heading and an input field. Here is my code:

<div class="row mb-5">
            <div class="col h1 text-white text-start text-center text-md-start text-lg-start">Welcome<input class="form-control no-border font-size" type="text" placeholder="Enter Name"></div>
        </div>

The output I want is "Welcome name" with both words aligned side by side. However, the current output looks different as shown in the image below.

https://i.sstatic.net/4PUSV.png

Is there any way to style it using Bootstrap to achieve the desired output?

htmlcssbootstrap-5

Answer №1

To achieve this effect, utilize Bootstrap exclusively. The magic lies within the col-auto CSS class applied like so:

<div class="row mb-5">
  <div class="col-auto h1 text-white text-start text-center text-md-start text-lg-start">
    Welcome
  </div>
  <div class="col">
    <input class="form-control no-border font-size" type="text" placeholder="Enter Name">
  </div>
</div>

In this snippet, the first column of the row is a col-auto that only accommodates the necessary content - in this case, "Welcome". Meanwhile, the second column takes up the remaining space within the row.

Answer №2

Make sure to add the class "d-inline" to the second div element for it to display inline. This change should be applied to the welcome div in order for it to function correctly.

<div class="row mb-5">
  <div class="col h1 text-white text-start text-center text-md-start text-lg-start d-inline">Welcome
      <input class="form-control no-border font-size" type="text" placeholder="EnterName">
  </div>
</div>

If you need more examples of horizontal forms, you can refer to the following link: bootsrap

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

Implement a CSS class specifically for products with low stock within the single product page on WooCommerce

I need some assistance with adding a class to 'Low stock' in the code snippet below, as I am not very familiar with php. My goal is to style the Low Stock text in WooCommerce to appear orange using CSS. function change_stock_text( $availability ...

phpcsswordpresswoocommerceproduct

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

Instructions on how to load an HTTP file inside a Bootstrap modal

Is it possible to load a file located at an http:// address into a modal window? Something like this: <a class="btn btn-info btn-large" data-toggle="modal" href="#http://localhost/login.html"> <i class="icon-user icon-white"></i> Login ...

csstwitter-bootstrap

Include a carrot icon on a navigation element that is currently active, ensuring it does not disrupt the position of the navigation icon within the container

I am working on a react navigation bar where I want to emphasize each navigation item with a carat when the user is on a specific URL or route. I have been trying to use the :after pseudo-class in Sass to add the carat, but it's not working as expecte ...

htmlcssreactjssassnavigation

Troubles encountered with webserver authentication while attempting to view webserver material using UWP WebView

In my IoT Core app development project, I am faced with the challenge of displaying webpages from a remote Apache webserver. The WebView class method .Navigate() has been effective for accessing non-protected pages, but I am struggling to figure out how to ...

apachewebviewuwphtmlwindows-10-iot-core

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

In my form, there is a field called 'Protein Change' that includes a multi-level dropdown. Currently, when a user selects an option from the dropdown (for example, CNV->Deletion), the selection should be shown in the field. However, this funct ...

javascripthtmlcss

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

csskendo-uikendo-ui-angular2

What is the solution to resolving an Open Quote error message in HTML coding?

Seeking assistance to resolve an HTML code error located at line 9. Fatal Error: Open quote is expected for attribute "{1}" associated with an element type "border". The problematic code snippet is as follows: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

javahtml

Struggling with creating a CSS navigation bar, having issues with hover functionality

I have a question about the navigation menu I created using CSS. I have included a sub-menu that appears when hovering over the main menu item, along with a triangle created with CSS placed underneath the menu. You can view the sample code here: http://js ...

htmlcsshovernav

Tips for enabling selection of list items in an input tag

Below is the code I have written to create an InputFilter. MyFilter = function(args) { var dataUrl = args.url; var divID = args.divID; var div = document.getElementById(divID); var myTable = '<input type="text" id="myInput" on ...

javascripthtmlcss

What is the best way to choose specific attributes in CSS?

My website has three large CSS files, each containing many classes. Some of these classes have the same name but are defined in different files. For example: CSS1: ... .btn-primary { background: #000; } ... CSS2: ... .btn-primary { back ...

css

tapping on the division and sliding it to and fro

I am trying to achieve a functionality where clicking a div will move another div to the right by 0, and on clicking the div again, the second div will move to the right by -200. However, I am facing issues getting it to work properly. $(document).ready(f ...

jquerycss

creating a personalized tooltip for every item within a dynamically generated @html.dropdownfor control in mvc3

Currently, I am developing a web project using MVC 3 and Razor in C#. In my code, I have implemented @Html.DropDownListFor to dynamically display items. Now, I would like to add tooltips for each item displayed by @Html.DropDownListFor. Here is the relev ...

jqueryhtmlasp.net-mvctooltipdropdownlistfor

Locate button elements with the class "button" that do not have any images inside them

Below is the code I am currently using for buttons (I prefer not to change it): <a href="#" class="button"> Button text <img src="someimage.png" /> </a> This CSS styled code creates a sleek button with an icon. To round the left sid ...

jqueryhtmlcss

Different ways to contrast rows within ag-grid

I am in the process of comparing two identical rows within my ag-grid and emphasizing any variances between them. While most column values are matching, I wish to highlight any cell that differs from the previous row. Is there a means to achieve this in ...

htmlangularag-grid

Changing the Div Class in Master page from a Child page is a straightforward process that involves modifying

I am trying to dynamically change the style of a div element in the master page from my child page. This is the code I am using: protected void ShowMsgText(int MsgID) { HtmlGenericControl MsgInner; MsgInner = ((HtmlGenericControl) ...

asp.netcssmaster-pages

Display the chosen date from the datepicker in the input field

Utilizing a JQuery DatePicker to be constantly displayed, I have assigned it to a div. Despite wanting it to display the selected date in the input box like in this example, it just isn't functioning as desired for me. Is there a way to have the selec ...

javascriptjqueryhtmldatepicker

Updating rows within a table dynamically using AJAX

I currently have a table with an empty body: <table id="tablem" border="1" width="100"> <thead> <tr> <th style="width: 10%">PageName</th> <th style="width: 5%">Lang</th> ...

htmlasp.netajaxhtml-table

When the button is clicked, the JavaScript function is not being executed

I'm having a strange issue with my second button not working as expected. Despite appearing to be straightforward, the "Reset" button does not seem to be triggering the clear() function. Within the HTML code, I have two buttons set up to interact wit ...

javascriptphphtml

Connecting MySQL to HTML: Step-by-step guide

I am currently working on building a website through coding in HTML using gedit. My goal is to have a login or registration feature on the homepage, which will then direct users to their own personalized page on the site. On this page, they should be abl ...

javascriptmysqlhtmlsqlgedit