Replace class with another class

Question

I have one form in which multiple divs are available.But for mobile view i want to remove pull-right class.

So is there any way to achieve it ?

I have removed detail level content but as we can see that one class pull-right which is create an issue for me.

Please let me know if any other information i missed to give here.

<form action="http://localhost:8085/email/email_client_area/" accept-charset="utf-8" id="commission_form" method="POST" name="commission_form">
<div class="col-md-6">
    <div class="col-md-12 main-box">
        <header class='main-box-header clearfix'>
            <h2><b>FILTER</b></h2>
        </header>
    </div>  
</div>  
    <div class="col-md-6 pull-right custom_class_1">
            <div class="col-md-12 main-box">
                <header class='main-box-header clearfix'>
            <h2><b>EMAIL INFORMATION</b></h2>
        </header>
        <div class="main-box-body clearfix">
            <div class="col-md-12"></div>
                <center>
                    <div class="col-md-12 margin-t-20 margin-b-20">
                        <button name="action" type="submit" value="save" id="submit" class="btn btn-success" >Search</button>
                    </div>
                </center>
            </div>
        </div>
    </div>
</div>  
 </form>
 </div>

I dont want that class if current width of window is less than 500 else need to same as it is. — Ankit Doshi, Jul 20 '17 at 09:47
@ADreNaLiNe-DJ : i have tried to myself to built logic but didnt get working. So i have post here — Ankit Doshi, Jul 20 '17 at 09:49
@Sagar V I have tried to build logic like first get div which have same class from form.But not able to get it — Ankit Doshi, Jul 20 '17 at 09:51
your problem is similar to [this](https://stackoverflow.com/questions/19404861/bootstrap-3-pull-right-for-col-lg-only) — jagad89, Jul 20 '17 at 09:57
Down voters, Will you please provide reason like why this question has been downvoted ? — Ankit Doshi, Jul 20 '17 at 10:25

Satpal · Answer 1 · 2017-07-20T10:12:19.227

2

You can set different CSS rules using media queries

@media only screen and (max-width: 500px) {
    .pull-right {
        /* override the CSS rules*/
    }
}

To remove using jQuery use

if($(window).width() > 500)
   $('#commission_form .pull-right').removeClass('pull-right').addClass('yournewClass')

edited Jul 20 '17 at 10:12

answered Jul 20 '17 at 09:49

Satpal

132,252
13
159
168

This is not working in my case because i want to remove pull-right class. – Ankit Doshi Jul 20 '17 at 09:52
,Thanks but it will remove from entire source but i want to remove only from this form. – Ankit Doshi Jul 20 '17 at 10:08
@AnkitDoshi, then use `$('#commission_form .pull-right').removeClass('pull-right').addClass('yournewClass')` – Satpal Jul 20 '17 at 10:12

score 0 · Answer 2 · answered Jul 20 '17 at 09:50

0

You should remove class pull-right from this div and add to styles:

@media(min-width: 768px) { 
  .custom_class_1{
    float: right;
  }
}

You can change 768px to other value

answered Jul 20 '17 at 09:50

Kamil Wyremski

41
7

score 0 · Answer 3 · answered Jul 20 '17 at 09:52

0

you can use JavaScript to do that.

Check the innerWidth of window. if it is less than 500, remove the class from the class list

if(window.innerWidth<=500){
     document.querySelector(".pull-right").classList.remove(".pull-right");
}

answered Jul 20 '17 at 09:52

Sagar V

12,158
7
41
68

score 0 · Answer 4 · answered Jul 20 '17 at 09:53

Here is Jquery solution to remove class pull-right.

if ($(window).width() > 500) {
    $('.main-box-body .pull-right').addClass('pull-right');
} else {
    $('.main-box-body .pull-right').removeClass('pull-right');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12  ">
<form action="http://localhost:8085/email/email_client_area/" accept-charset="utf-8" id="commission_form" method="POST" name="commission_form"><div class="col-md-6">
    <div class="col-md-12 main-box">
        <header class='main-box-header clearfix'>
            <h2><b>FILTER</b></h2>
        </header>
        <div class="main-box-body clearfix">
            <div class="col-md-12"></div>
                        <div class="col-md-12"></div>
                        <div class="col-md-12"></div>
                        <div class="col-md-12"></div>
                        <div class="col-md-6 pull-right custom_class_1">
                            <div class="col-md-12 main-box">
                            <header class='main-box-header clearfix'>
                        <h2><b>EMAIL INFORMATION</b></h2>
                    </header>
                    <div class="main-box-body clearfix">
                        <div class="col-md-12"></div>
                            <center>
                            <div class="col-md-12 margin-t-20 margin-b-20">
                                <button name="action" type="submit" value="save" id="submit" class="btn btn-success" >Search</button>
                            </div>
                            </center>
                        </div>
                    </div>
                </div>
            </div>  
        </div>
        </div>
        </form>
        </div>

score 0 · Answer 5 · answered Jul 20 '17 at 09:53

0

Use of Offsetting will help you in such type of condition. Where you have added pull-right class change that one with "col-sm-6 col-sm-offset-6 custom_class_1"

For more info visit here:

http://getbootstrap.com/css/#grid-offsetting

answered Jul 20 '17 at 09:53

Sangrai

687
1
6
19

score 0 · Answer 6 · answered Jul 20 '17 at 10:10

I think , you may use the javascript code for getting the width of the document and then add remover the class as you want .

var doc_width  = document.documentElement.clientWidth;
if (doc_width < 767 ) {
    $("div.main-box-body div.pull-right").removeClass('pull-right');
}

Replace class with another class

6 Answers6