Bootstrap CSS for two classes

Question

I have a div tag with .col-xs-12 .col-md-4 and .left. I want that when the application is started in a pc, the application use the CSS for .col-md-4 .left, and when is started in a smarthphone, only use .col-xs-12 CSS.

I already test this:

.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 in a pc, the div will be a .col-md-4 with text-align: left, and in a smarthphone will be -col-xs-12 with text-align: center

https://getbootstrap.com/docs/4.3/utilities/text/#text-alignment — Lalji Tadhani, Jul 29 '19 at 07:14
Possible duplicate of [Bootstrap - Text-align class for inside a table](https://stackoverflow.com/questions/12829608/bootstrap-text-align-class-for-inside-a-table) — NickCoder, Jul 29 '19 at 07:26

score 2 · Answer 1 · edited Aug 20 '19 at 11:42

Try using media queries, you can put specific breakpoints.

Reference : 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>Typical Media Query Breakpoints</h2>
    <p class="example">Resize the browser window to see how the background color of this paragraph changes on different screen sizes.</p>
    
    </body>
    </html>

score 1 · Answer 2 · answered Aug 20 '19 at 12:00

1

You can use both col-xs-12 and col-md-4, bootstrap works on both classes. Here is my bootstrap4 website, I am also a beginner of bootstrap-css developer, so I make this bootstrap-css website.

Hope you will be another good bootstraper!

answered Aug 20 '19 at 12:00

Henry

21
1
3

score 0 · Answer 3 · answered Jul 29 '19 at 07:18

0

Use this 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">
  My Test
</div>

more info

answered Jul 29 '19 at 07:18

Lalji Tadhani

14,041
3
23
40

score 0 · Answer 4 · answered Jul 29 '19 at 07:23

<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>

You can remove those css and add these two class text-md-left text-center. Note this only works in bootstrap4.

Bootstrap CSS for two classes

4 Answers4