"Implementing Bootstrap CSS styles for a pair of specific classes

I am working with a div element that has classes of .col-xs-12 .col-md-4 and .left. My goal is to ensure that when the application is opened on a computer, it uses the CSS styles for .col-md-4 and .left, and when accessed on a smartphone, it only applies the CSS for .col-xs-12.

I have conducted tests on this situation:

.col-md-4.left {
  text-align: left;
}

.col-xs-12 {
  text-align: center;
}
<div class="col-xs-12 col-md-4 left">
  My Test
</div>

The idea is that when the application is viewed on a computer, the div will be styled as a .col-md-4 with text-align: left, and on a smartphone it will display as .col-xs-12 with text-align: center.

htmlcssbootstrap-4

Answer №1

Consider implementing media queries with specific breakpoints for responsive design.

For more information, visit: https://www.w3schools.com/css/css_rwd_mediaqueries.asp 

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
    .example {
      padding: 20px;
      color: white;
    }
    /* Extra small devices (phones, 600px and down) */
    @media only screen and (max-width: 600px) {
      .example {background: red;}
    }
    
    /* Small devices (portrait tablets and large phones, 600px and up) */
    @media only screen and (min-width: 600px) {
      .example {background: green;}
    }
    
    /* Medium devices (landscape tablets, 768px and up) */
    @media only screen and (min-width: 768px) {
      .example {background: blue;}
    } 
    
    /* Large devices (laptops/desktops, 992px and up) */
    @media only screen and (min-width: 992px) {
      .example {background: orange;}
    } 
    
    /* Extra large devices (large laptops and desktops, 1200px and up) */
    @media only screen and (min-width: 1200px) {
      .example {background: pink;}
    }
    </style>
    </head>
    <body>
    
    <h2>Customize Media Query Breakpoints</h2>
    <p class="example">Experiment by resizing the browser window to observe how the background color of this paragraph adjusts to different screen sizes.</p>
    
    </body>
    </html>

Answer №2

Utilize both col-xs-12 and col-md-4 in your website design as Bootstrap caters to both classes seamlessly. I recently launched my Bootstrap 4 website and as a novice bootstrap-css developer, I proudly present my creation: this bootstrap-css website.

Wishing you success on your journey to becoming a proficient bootstraper!

Answer №3

Make sure to apply the class text-center text-md-left

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-md-4 text-center text-md-left">
  Example
</div>

additional details

Answer №4

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 col-md-4 text-md-left text-center">
  My Test
</div>

In order to update the styling, you can swap out those css classes with text-md-left and text-center. Please keep in mind that this modification is specifically tailored for bootstrap4.

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

Steps for invoking the Struts Action class and presenting the information on the screen utilizing jQuery

In my JSP page, I have a table displaying data in a tabular format with three different links in one column. Each link triggers a different method in the Action class, which then appends rows based on the returned list size. Using struts iterator, I iterat ...

jqueryhtmlajaxjspstruts2

The Mystery of Bootstrap 4 Column Sequence

I was able to achieve this layout using Bootstrap 3, but I am not sure how to implement the same setup with Bootstrap 4 (4.1). My goal is to have a column displaying C beneath A, and another column displaying B. However, on mobile devices, I want all thre ...

twitter-bootstrapcssflexboxbootstrap-4

Guide on aligning text to the center in the navigation bar

I am currently experimenting with a dropdown navigation bar using pure CSS. However, I am facing issues with text alignment as it only aligns the dropdown text. Setting left: 50% and right: 50% does center the text, but it doesn't cover the width of m ...

htmlcss

Stopping horizontal scrolling in Material-UI Autocomplete/Popper: A troubleshooting guide

I am currently working on incorporating the Material-UI Autocomplete component, and my goal is to have each option label show an icon along with some text. The challenge I'm facing is that I only want the popper element to be the width of the text inp ...

cssreactjsmaterial-ui

Specialized hover mission

Do you have a question? Imagine you have 3 spans where the default color is black. When you hover over a span, its color changes to red. But what if I told you that at the start, the first span has an orange color. Now, I want to hover over the orange on ...

javascripthtmlcsshover

How to display an image stored in Laravel within a Nuxtjs application?

I'm trying to display all images that are saved in nuxtjs using Laravel's storage feature. <img v-for="(row, index) in files" :src="'storage/' + row" :key="index" alt="" width="150px" ...

htmllaravelvue.jsstoragenuxt.js

Is it feasible to navigate through submenus using only the [Tab] key in CSS?

Is there a way to activate a submenu in a styled menu using only the [Tab] key so that the submenu becomes visible? I attempted to use the :focus pseudo-class ul li a:focus + ul li a ... and when t ...

htmlcssfocusaccessibility

Tips for organizing list items in a grid format using CSS and HTML

In my div block, the width is not fixed. Inside the div, there is a list block with 11 items that I want to display evenly like this: ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## ##item## I&a ...

htmlcss

How can one utilize XPath and the R language to selectively extract portions of a text string when the strings are varied and inconsistent?

Can xpath and R (not PHP) be used to extract just the city from a longer address string? Below is the relevant excerpt from a webpage: <table id="offices" cellspacing="8" width="700" height="100" border="0"> <tbody> <tr> <td valign ...

htmlrparsingxpath

Delay the rendering of the MUI DataGrid column until after the DataGrid is visible on the screen

Would it be feasible to asynchronously load a column of data in the MUI DataGrid after the table is displayed on the screen? Retrieving this additional data from the database is time-consuming, so I aim to have it appear once the table has fully loaded. T ...

javascripthtmlreactjsmaterial-uidatagrid

Proper Alignment of Div Elements

Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in r ...

htmlcss

Warning issued after numerous clicks

My goal is to implement an Alert System that notifies the user when they leave a field empty. Currently, if a field is left empty and the next button is clicked, an alert pops up. However, if the same field is left empty again and the button is pressed, mu ...

javascriptjqueryhtml

Steps to create a loading bar that starts loading when an ajax task begins

What is the best way to show a loading bar as an AJAX task begins on a page? Additionally, how can we make sure that hitting the back button will return to what was being viewed before that specific AJAX task? ...

htmlajax

Every time a new message is sent or received, I am automatically brought back to the top of the screen on the

I'm currently working on integrating a chat feature into my Angular Firestore and Firebase app. Everything seems to be functioning well, except for one issue - whenever a new message is sent or received, the screen automatically scrolls up and gets st ...

htmlangulartypescriptangularfireionic5

The issue of JWPlayer losing focus when placed within a Bootstrap4 modal

When attempting to load a jwplayer inside a Bootstrap4 modal in a simple way, I encountered an issue. <script> var playerInstance = jwplayer("video_container"); playerInstance.setup({ file: mediaUrl; autostart: true; }); </script> Th ...

bootstrap-4modal-dialogfocusjwplayer

Styling Columns with Borders and Gutters in Bootstrap

My goal is to create 4 divs, each with a width of 3 columns and a 3px border. I have successfully added the columns with borders, but I can't seem to get the border-box property to work as intended. I believe that I need the border to be an inner bord ...

csstwitter-bootstrapgridborder

What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap? <div class="row"> <ul class="col-md-4" id="phones"> <li class="thumbnail" ...

htmlcssangularjstwitter-bootstrapangularjs-ng-repeat

Modify the button's color when clicked and add it to an array with JavaScript

I am currently working on changing the color of buttons to indicate a selection. When a button is selected, its value is added to an array. If the same button is clicked again, it becomes unselected and its color reverts back to the original state, with it ...

htmlarraysangularjscss

Looking to use Jquery to translate an image both on and off the screen with full width and height?

Imagine a scenario where a full-screen image remains hidden upon page load. When a user clicks a link, the image smoothly slides up from the bottom of the page. Upon clicking the image, it should smoothly move off the page as if it were being translated do ...

jqueryhtmlcssimageanimation

The ion-datetime in Ionic 4 ensures that the floating label always remains visible, even when the input

When an ion-datetime field in Ionic 4 has no value, the label always floats as shown below. Here is my code snippet: <form [formGroup]="statusHandlerForm"> <ion-item class="input-container " align-items-center no-padding> <ion-la ...

javascriptcssangularionic-frameworkionic4