I'm having trouble centering a text field on my screen. No matter what I try, it stays aligned to the left. How can I fix this and get it centered?
<div class="form-row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>
Method 1) Utilize class= "offset-md-4" within bootstrap-4. Instead of using col-md-offset-4
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="form-row">
<div class="col-md-4 offset-md-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>Method 2) Opt for class="mx-auto" which translates to margin-left:auto
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="form-row">
<div class="col-md-4 mx-auto">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>If you're working with bootstrap, you can easily center your input field by adding the text-center class to it. Here's an example:
<div class="form-row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label asp-for="LastName"></label>:
<input asp-for="LastName" class="form-control text-center" />
</div>
</div>
I tested this code and confirmed that the input is now centered properly. Feel free to check it out https://i.sstatic.net/gvCVl.png.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Souk</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>
<body>
<div class="row">
<div class="offset-4 col-sm-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control text-center" />
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html><div class="col-md-4 col-md-offset-4">Insert your form content here</div>
Make sure to allocate 4 out of the 12 columns for col-md-4.
For col-md--offset-4, an additional 4 column space will be added on both sides of the form.
To display your custom css, ensure that you are aware of any rules that could potentially override the suggested rules.
Consider the following example:
div.form-row div.col-md-4.col-md-offset-4 div.form-group {
display: flex!important;
justify-content: center!important;
}<div class="form-row">
<div class="col-md-4 col-md-offset-4">
<div class="form-group">
<label asp-for="FirstName"></label>:
<input asp-for="FirstName" class="form-control" />
</div>
</div>
</div>My website is built using Bootstrap 5, and I am working on creating a navbar dropdown functionality. On desktop, I want the dropdown to open on hover and lead to a new page when clicked. However, on mobile, I only want the dropdown to open and close on cli ...
I have been working on my Laravel app and attempting to make an ajax call. However, I am encountering an issue where there is one extra slash being added, whether it's a backslash or a forward slash. Can someone please explain why this is happening an ...
When I retrieve data from a REST api, I need to split the name parameter at '2330' and insert a line break. For example, if the name is: ABCD 2330 This is My Name, I want the output on my screen to appear as: ABCD 2330 This is My Name // this par ...
Recently, a marketing firm provided me with a custom tag to implement on a Wordpress site for tracking clicks on specific buttons. I am utilizing the Elementor page builder and have assigned unique IDs to each button. Although I am new to Google Tag Manage ...
Currently, I am attempting to achieve a transparent background for a time-series chart created with FusionCharts. Despite trying the standard attributes that usually work on other chart types and even hardcoding a background color, none of these seem to af ...
I am in the process of developing a web application that allows users to upload CSV data and images, which are then displayed on the application. However, I have encountered an issue where I am unable to display the imported images. The images are imported ...
http://jsfiddle.net/iansan5653/7EPjH/17/ <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> function chart() { var pressure; ...
I am in the process of creating a website that will display translated content using different gTLDs. For example, example.com, example.fr, example.de. The plan is to have all these domains redirect to the same content on one server. Then, based on the gT ...
I am interested in developing an android application and have some knowledge about Ionic, which is also used for creating mobile apps. I have more experience with Android development and am curious to understand the distinctions between the two platforms ...
I want to create a doughnut chart representing the number of individuals who have tested positive for Coronavirus and the number of deaths related to it. How can I transfer the same data from the top container into the chart? The confirmedCases and deaths ...
Check out my Codepen demo here: https://codepen.io/nickfindley/pen/dJqMQW I am seeking to replicate the current behavior of the page without specifying a fixed height for the header. The goal is to make the header adjust dynamically based on the content, ...
Is there a way to show all column names from a MySQL table on a webpage if only the table name is known? ...
I am working on creating a bot that simulates user input for the WattsApp web website. When I manually type a message into the website, it enables a button that allows me to send the message. However, when my script runs, it finds the input box, changes t ...
Is there a way to use CSS to disable the left border to the right of a cell with a specific class? In the scenario shown in this image, the right border appears double due to the combination of the "selected" class border and the default gray border. I wo ...
I am working on a sample HTML page that includes inline JavaScript for calculating geocodes and retrieving latitude and longitude values. My question is, how can I submit all the form values along with the latitude and longitude returned from the showlocat ...
Hey there, I'm in a bit of a quandary at the moment. I've been searching on Google for quite some time now, but unfortunately, I can't seem to find what I'm looking for. Hopefully, you guys can lend me a hand. What I'm trying to d ...
For a test I am conducting, I need to examine the tags and styles present in a specific element. The element, displayed on the page as bold, italic, and centered, looks like this: <p style="text-align: center;"> <em> <strong>TE ...
I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...
I have a JavaScript file named action.js and I am trying to incorporate it into an Angular project. After doing some research, I found out that the js file should be placed in the assets folder and the path must be referenced in the scripts array within an ...
If I have an array as shown below, how can I move key [2] and its corresponding value to the front of the array? This would make it key [0] and increment the other keys by 1. Current: [0] => Array ( [name] => Vanilla Coke cans 355ml x 2 ...