Adjust text alignment based on the mobile device screen size using Bootstrap 4

On smaller devices, the layout of my horizontal label and text field is not as I expected. It appears like the image below:

https://i.sstatic.net/9I8Os.png

I am trying to make the First Name label left-aligned on small devices. Here is the code I have been using:

 <div class="row">
    <div class="col-sm-4 text-right">
        <label for="firstname" class="control-label text-right">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

Any help would be appreciated.

cssbootstrap-4

Answer №1

Utilizing bootstrap for a sleek design

<div class="row">
    <div class="col-sm-4 text-md-right text-sm-left" >
        <label for="firstname" class="control-label">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

Answer №2

While bootstrap does not have a built-in solution for this issue, a simple CSS tweak can do the trick. You can try something similar to the following code:

<div class="row">
    <div class="col-sm-4 text-right mob-text-left">
        <label for="firstname" class="control-label text-right">First Name :</label>
     </div>
      <div class="col-sm-6">
        <input type="text" class="form-control" placeholder="Enter Your First Name"  />                 
      </div>

@media (max-width: 768px) {
      .mob-text-left {
              text-align: left;
       } 
    }

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

Exploring the world of CSS preprocessors as a beginner

As someone who is still learning CSS, I find it a bit difficult to keep my stylesheets organized. With around 800 lines of CSS, it's becoming more and more challenging for me. While experienced developers might not have an issue with this, it's d ...

css

How to eliminate spacing between photos in a flexbox layout

[Unique] Find the Solution Image inside div has extra space below the image My design showcases various images of different sizes in multiple rows. See an example here. Despite my efforts, there are noticeable gaps between the rows that I can't seem ...

cssvue.jsduplicates

Scrolling horizontally using jQuery and CSS

I have been experimenting with creating a horizontal scrolling page that moves to the right when scrolling down and to the left when scrolling up. Here is the current code: HTML <div class="scroll-sections"> <section id=&quo ...

javascripthtmljquerycss

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...

javascripthtmlcsshtml-table

The CSS styles are not being rendered on the page

My simple static html/css project seems to be having trouble applying styles to the html elements in stackblitz. You can view the project here. I'm wondering if there might be an issue with linking the css file using the link tag, or perhaps it's ...

htmlcssstackblitz

The animation unexpectedly resets to 0 just before it begins

Currently, I am developing a coverflow image slider with jQuery animate. However, there are two issues that I am facing. Firstly, when the animation runs for the first time, it starts at `0` instead of `-500`. Secondly, after reaching the end and looping b ...

javascriptjquerycssjquery-animatecss-transforms

The comparison between Bootstrap 4 collapsible and expanded menus

Forgive me if this question has already been asked (I'm still new to all of this and learning, finding the answer in search is challenging). I'm attempting to create a collapsible navbar that, when expanded, displays items separated by a "|" sym ...

htmlcssbootstrap-4navbar

"Troubleshooting: Why Won't My Entire Div Display on the

Struggling with a website rebuild due to my limited knowledge of HTML/CSS. For some reason, this whole div section isn't showing up as it should. Here is the problematic div: <div class="container clearfix"> <div class="border-shade sli ...

htmlcss

Concealed upper TD boundary in IE 8

I've been struggling all day to figure out this style issue without any success. http://jsfiddle.net/9HP9Q/1/ The table lines should have gray borders around them. It's working fine on all browsers except Internet Explorer 8. .order_table tab ...

htmlcsshtml-tableinternet-explorer-8border

Enhancing User Experience with CSS

Is there a way to create a link within a div and change the hover color to indicate it's a link? The challenge is that my div contains both an image and text in separate divs. div { :hover { background-color: light cyan; } Currently, when I hov ...

htmlcss

Creating a visually appealing lineup of images with CSS3 and optimal methods

Hey there, I'm diving into the world of HTML5 and CSS3 and feeling a bit lost. Can't seem to find the right solution for what should be a simple task. My goal is to create a line of clickable images/links on my website similar to how Stack Overfl ...

htmlcss

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time. While implementing ...

jquerycsstwitter-bootstrap-3bootstrap-modal

Is it necessary to have uniform spacing between links in a responsive navigation menu?

I am attempting to create a horizontal menu navigation system. I have multiple links in the navigation, and my goal is to evenly space them horizontally. Is there a way to achieve uniform spacing between links in a horizontal menu? HTML: <div id= ...

htmlcssresponsive-designnavigation

My HTML components are not showing alert messages at the top as expected

My application's alert message is supposed to stay on top of all other HTML elements as the page scrolls. However, it seems to be going behind certain components instead of staying on top like it should. This issue is puzzling because all components u ...

cssangularalert

How can I set up Emacs company-bootstrap to automatically activate in web-mode?

While working in web-mode and editing an html file, I find myself needing to use M-x company-bootstrap to display a list of possible values for a class in an html tag. <p class="M-X company-bootstrap here .."> Is there a way to automatical ...

bootstrap-4emacs

Struggling to make the jQuery timepicker plugin work on my JSP page

Hi everyone, I'm having trouble getting a jQuery plugin called timepicker to work. I already have a datepicker setup and running smoothly. I've spent hours researching this issue and trying different plugins. Here's my process: I download th ...

javascriptjqueryhtmlcssjsp

Is there a way to integrate personalized Javascript files within Bootstrap 4?

As I work on developing my own components of Bootstrap 4 for a dashboard site, I have run into a challenge. I need to include custom JS to be compiled with my Bootstrap 4 project, but I am facing limitations. Every time I try to include a module, I am unab ...

javascripttwitter-bootstrapbootstrap-4node-modules

Switch out a static image for a dynamic YouTube video using CSS styling

I've been working on customizing a template website, and I want to switch out the current image for a YouTube video. I have the code from YouTube ready to go, but I'm not sure what changes need to be made in the template. Take a look at the CSS ...

htmlcssimagereplaceyoutube

What methods can be used to prevent the appearance of the ActiveX warning in IE7 and IE8 when dealing with drop

I have a dilemma with my website where I am using JavaScript to modify CSS on hover for specific items. Interestingly, in Firefox everything runs smoothly without any ActiveX message popping up. However, in IE8, I encounter a warning stating "To help prote ...

javascripthtmlcss

"Create a flexible CSS grid with a dynamically changing number of rows and customizble

I am currently working on a project that involves creating a dynamic grid layout with two resizable columns, namely #red-container and #green-container. The goal is to make each column resizable horizontally while also allowing the main container #containe ...

htmlcss