Align labels to the right in a Bootstrap 4 modal

Is there a way to align this label to the right? Currently, it only aligns to the left. I tried overriding the default value in Bootstrap 4 from justify-content: center to 

justify-content: right !important;
, but it still remains on the left. What can I do to make it right-aligned?

<div class="modal-body">
    <form class="form-horizontal">
        <div class="form-inline">
            <label class="col-md-4">Type</label>
            <input class="col-md-8" type="email" class="form-control">
        </div>
    </form>
</div>

CSS:

div.form-inline label.col-md-4 {
    justify-content: right !important; 
}

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

csstwitter-bootstraplabelbootstrap-4

Answer №1

Include the "text-right" class for the label

<div class="modal-body">
    <form class="form-horizontal">
        <div class="form-inline">
            <label class="col-md-4 text-right">Category</label>
            <input class="col-md-8" type="email" class="form-control">
        </div>
    </form>
</div>

Answer №2

Ensure you modify it to:

form.label-inline div.col-md-4{
    align-items: flex-end;
}

align-items: right is not a recognized value.

Answer №3

justify-content: flex-end was causing issues for me (using Bootstrap 4.1.0), but I found that using text-align: right fixed the problem:

<style>
label { text-align: right }
</style>

Alternatively, you can add the following to a .css file:

.col-form-label { text-align: right }

Answer №4

Bootstrap 4 has transitioned to using the flex layout instead of block. In your scenario, you will need to apply justify-content: flex-end.

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
div.form-inline label.col-md-4{
  justify-content: flex-end; 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
         <form class="form-horizontal">
            <div class="form-inline">
              <label class="col-md-4">Type</label>
              <input class="col-md-8" type="email" class="form-control">
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </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

Creating a responsive container in Bootstrap that adjusts height dynamically, featuring a text input box positioned at the bottom

I am currently using Bootstrap 4 to design a desktop chatbot inspired by Google's Bard. My goal is to have a container that spans the height of the screen, with the text input located at the bottom of the container. Additionally, I want the container ...

htmlcssbootstrap-4

When implementing jQuery for scrolling on a website, touch gestures may become unresponsive on Safari for iOS devices

While developing a custom website with Angular, I encountered an issue specifically with Safari on iOS. The website is a single-page app with multiple menu sections that trigger a scroll animation when selected using jQuery. Everything was working smoothly ...

javascripthtmljquerycssios

How can we create a custom text search filter for month and date strings in Bootstrap-table2?

I'm working on a BootstrapTable that has a single column with a dataField of birthday, where the date is formatted as "day/month" (e.g. "3/10" for October 3rd). I managed to create a formatter that changes each string like "3/10" to display as "Octobe ...

javascriptbootstrap-4react-bootstrap

Utilizing a div element for creating a clipping mask with CSS

I am facing a challenge with a background image that has been set to background-size:cover; and a series of overlaid divs that I would like to convert into separate clipping masks. I have explored the clip: rect(20px, 20px, 20px, 20px,) feature, but since ...

htmlcssoverlaymaskclipping

Creating Unique Numbers for Every <a> Element

Can someone help me figure out how to create a form that generates a unique set of random numbers from the range (0,9) displayed in a group of button tags? I've written some javascript code but it's not quite working as intended. (function($) ...

javascriptjqueryhtmltwitter-bootstrap

Resizing Images in a Responsive Design

When creating a website, have you considered options besides resizing images for mobile devices? Instead of downloading the full image and resizing it to fit the screen, causing strain on CPU and RAM, are there alternative methods that could be more effi ...

htmlcssresponsive-design

Delete a portion of the text on the button

Is there a way in HTML/JS/JQuery or CSS to search for a specific button in the document and remove/hide only the text of the button without affecting the icon? @Html.ActionLink("Edit", "Edit", new { id = -1 }, new { @class = "btn-edit" }) | ...

javascriptjqueryhtmlcssasp.net-mvc-4

Tips for customizing a red error input box in AngularJS when the cursor is present but no content has been entered

I am working on implementing validation in my form using AngularJS. My goal is to have the input box turn entirely red when there is an error. Currently, after I receive an error and delete the text with the cursor still inside the box, the color of the bo ...

htmlcssangularjsformsvalidation

CSS Sprite Animation Technique

Hello there, I've been attempting to create a simple animation using CSS and a sprite but for some reason it's not working. Can anyone help me figure out what I'm missing? I have created a sample on JS Fiddle. Could someone please explain w ...

htmlcssanimationsprite

Email design tip: Ensure consistent line heights by adjusting code for Outlook.com to override any default settings. Use the following CSS code: ``

I've been trying to fix this problem for 22 hours now, but as a newcomer, I think it's time to hand it over to the pros. I've been attempting to get rid of the extra line height that Outlook.com adds to emails, but I haven't had any lu ...

htmlcssoutlook.com

Arrange elements within a navigation bar

As a beginner in coding, I am taking on the challenge of creating a webpage for a student project using React. I've hit a hurdle while working on the navbar for the page. How can I align the items (Home, Project, Team, Contact) to the right side of t ...

htmlcssreactjsnavbarpositioning

"Spice up your website with dynamic text colors using JQuery

REVISED I've been exploring various options and attempting to create a solution, but I'm struggling with it... Do you think it's feasible to achieve this? <button>Button</button> <div id='myDivId'> ...

jqueryhtmlcss

What is the best way to center align an element while having another element situated directly below it?

I want to create a grid of "clock" elements, with five clocks in each row. Below each clock, I'd like to display the DAY and DATE centered with the clock (day on top line, date below). Since I'm new to html/css, I appreciate your patience. Here&a ...

javascripthtmlcss

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

htmlcssbootstrap-4fluid-layout

Can Vuetify's grid system seamlessly integrate with the Bootstrap grid system?

According to information from the Vuetify documentation: The Vuetify grid draws inspiration from the Bootstrap grid. It involves the use of containers, rows, and columns to organize and align content. If I utilize Bootstrap grid classes in a Vuetify pr ...

csstwitter-bootstrapvue.jsbootstrap-4vuetify.js

The text appears as regular bold instead of extra bold in Chrome

Having trouble with displaying the Open Sans Extra-Bold font? Check out the font here: I've tried everything, but it just won't show up on my website. Any suggestions? Here is the code on JSFiddle for reference: https://jsfiddle.net/0hhbgyrd/ ...

csssasswebfonts

Interaction between the app component's HTML and TypeScript files

I have created an Angular form in my app.component.html file and now I want to send the input data to an API using the app.component.ts file. How can I access the input values from the .html file in the .ts file where I am processing the data for the API? ...

javascriptangularformsbootstrap-4

encountering an issue with the map function being undefined

I am currently working on a todo list and I want to be able to delete data stored in an array using the filter method. However, I am encountering an error with my code. Here is the snippet: const onDelete = (id) => { setaddItem((prevData) => { ...

htmlcssreactjs

defined dimension of table cell

<table class="data-table"> <tr> <th style="width: 200px;"> DescriptionDescription <%--in this case <td> is resized--%> </th> </tr> <% foreach (var item in Model) { %> ...

htmlasp.net-mvccss

Enhancing Option Element Height with Padding in Bootstrap 5

Is there a way to adjust the height or increase padding of the option element within a standard select box using Bootstrap 5? More information can be found at: https://getbootstrap.com/docs/5.0/forms/select/ Could you provide an example code to demonstrat ...

cssbootstrap-5