Align text to left and right on mobile using Bootstrap's custom class

I am trying to achieve a responsive design for my form labels by using the text-right class. However, I want the label to left align when the screen size is reduced so that it appears at the top-left instead of the top-right. Despite changing the text-align:left, the effect does not seem to be applied.

@media (max-width: 767px) {
  .form-group > label.text-right {
    text-align: left;
    color: red;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label text-right">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

cssbootstrap-4

Answer №1

Responsive text alignment options provided by Bootstrap eliminate the need for extra CSS.
Simply utilize text-sm-right text-left...

<div class="form-group row">
        <label class="col-sm-2 col-form-label text-sm-right text-left">Label</label>
        <div class="col-sm-10">
            <input type="text" class="form-control">
        </div>
</div>

Check out the demonstration here:

Answer №2

Please note: The recommended solution is tailored for Bootstrap 4, however, the following approach can be applied to Bootstrap 3 as well

The issue arises because !important is enforced on .text-right

You have the option to also employ !important. It is advisable to refrain from utilizing the .text-right class and instead create a custom one. Overusing !important to override another instance of !important is not recommended. Limit the use of !important whenever possible. Although Bootstrap uses it in this context, there are better alternatives.

I will present two solutions:

Option #1:

@media (max-width: 767px) {
  .form-group > label.text-right {
    text-align: left !important;
    color: red;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label text-right">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </div>
</div>

Option #2:

@media (max-width: 767px) {
  .form-group > label.align-label {
    text-align: left;
    color: red;
  }
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<div class="form-group row">
  <label class="col-sm-2 col-form-label align-label">Label</label>
  <div class="col-sm-10">
    <input type="text" class="form-control">
  </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 Bootstrap layout with columns of varying heights

My current setup looks like this: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content&l ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...

cssreactjsmaterial-uistyled-components

Enable the modal window to be scrollable

I've been struggling with configuring my modal to allow scrolling when the content overflows. I attempted to add "overflow: auto" to the modal, but it didn't seem to do the trick. It's important to note that I am not utilizing Bootstrap. One ...

cssmodal-dialog

Problems with Emulating Chrome | Using Media Queries

Currently, I am in the midst of testing my responsive website and I have encountered an issue with the Chrome emulator. When I select a specific device like "iPhone 6", the responsive views are not displaying correctly. Instead, unsightly scroll bars appea ...

csshtmlresponsive-designmedia-queries

Steps to integrate font-awesome icons into an input element created using jQuery

I am generating a row using jQuery's append function, and within this row, I have a delete button. Desired Outcome: Instead of using the text "Delete," I want to use a Font Awesome icon "fa-fa-trash" for the button. What is the correct way to achie ...

jquerybootstrap-4font-awesome

What exactly does the ::before pseudo-element accomplish?

After reviewing the documentation, I believe I have a good grasp of the purpose of ::before and ::after. It seems that they are typically used in conjunction with other elements. However, the webpage I am examining contains the following code: <body> ...

htmlcssgoogle-chromecss-selectors

Ways to change the CSS styling of the placeholder attribute within a textarea or input field tag

I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concep ...

cssangularangular-material2

Include a CSS file from an external JavaScript file

Is there a way to include an external CSS file in an external JS file? I am trying to reference and load Default.css inside Common.js like the image below shows. Any suggestions are greatly appreciated! BB ...

javascriptcssexternal

Jquery's mouseclick event selects an excessive number of elements

Is there a way to retrieve the ID of an element when it is clicked, only if it has one? I currently have this code set up to alert me with the element's ID: $("[id]").click(function(event) { event.preventDefault(); var id_name = $(this).attr ...

javascriptjqueryhtmlcssclick

Issue with Bootstrap 4 Navbar search box alignment towards the center

I've looked through numerous discussions on center aligning elements within a navbar, but I haven't found a solution yet. My struggle is with center aligning a search bar in my navbar, outside of the collapsible button. Despite trying various me ...

htmlcsstwitter-bootstrap

Tips for inputting information into the wenzhixin bootstrap-table

I am facing an issue with adding data to the wenzhixin bootstrap-table after the table has been initialized. Here is the JavaScript function I am calling on a button click event: function addData(){ var data = [ { "id": 1, ...

bootstrap-4

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

javascriptjquerycssanimationgsap

What is preventing the CSS selector from functioning for <li> elements nested within a <p> tag?

Studying for my exam, I decided to practice answering some past questions without looking at the markscheme. One question in particular has me stumped: The question asks to explain the effect and identify which elements will be affected by the following r ...

htmlcsscss-selectors

"Hovering over the navigation tab does not trigger the dropdown menu

Can't seem to get my dropdown menu on the right to work when hovered. I feel like I must be missing something really simple, but I can't figure it out! When I use .vanish:hover .dropdown, it's not quite hitting the mark. What am I doing wron ...

htmlcss

Having difficulty customizing the color of bullet points within a list

I've been attempting to update the color of the list points without success. Can you help me troubleshoot? <div class="mobile-menu" id="mobile-menu"> <div id="mobile-menu-links"> <h4>General:</h4> ...

htmlcss

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Struggling to effectively customize a bootstrap theme

After incorporating a custom .css file from an internet theme that overrides some bootstrap properties, I noticed that it works in certain scenarios. However, when attempting to modify the primary color in the :root{} section of the styles.css file, the ch ...

cssreactjssassreact-bootstrap

Chrome is currently experiencing a problem with embedded fonts, causing the bottom of the customer's font to be

Greetings, I am encountering a font-face issue specifically in Chrome on Windows. Below is the code snippet causing the problem: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta ...

htmlcssfont-faceembedded-fonts

The CSS transition will only activate when coupled with a `setTimeout` function

After using JavaScript to adjust the opacity of an element from 0 to 1, I expected it to instantly disappear and then slowly fade back in. However, nothing seems to happen as anticipated. Interestingly, if I insert a setTimeout function before applying th ...

javascriptcss

CSS a:hover not behaving as expected

So, I'm diving into creating my very first website and I'm running into a little hiccup with the "a:hover" feature in CSS. No matter what I try, the links on my page stay the same color whether hovered over or not. Here's a snippet of code ...

htmlcsshyperlinkhovermouseover