Different class in HTML depending of screen size

Question

I'm newbie in bootstrap and I don't know how to do the following: I'm working with Django and in my HTML template I have this:

<div class="tabs tabs-vertical tabs-left">
                            <ul class="nav nav-tabs">

This works fine with large screens, but it looks ugly when I access into the page with my phone, so I need that my template look like this if the screen is xs:

<div class="tabs">
                            <ul class="nav nav-tabs nav-justified flex-column flex-md-row">

Can this be done with bootstrap? It's necessary to clone the entire div content and hide depending of screen? Thank you.

Answer 1

You could try using mobiledetect.js script, and depending on what device it registers, send it to a different CSS script that would fit it for each type of device (ie mobile, pc, etc.)

Script download: http://hgoebl.github.io/mobile-detect.js/

Answer 2

Just use javascript to add the classes if the screen width is less that your desired breakpoint. Since you're using Bootstrap, you can use jQuery to make it easier. Example:

 if (window.innerWidth <= 500) { $('#nav').removeClass('tabs-vertical tabs-left'); $('#navUl').addClass('nav-justified flex-column flex-md-row'); } console.log(document.getElementById('nav').classList); console.log(document.getElementById('navUl').classList); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tabs tabs-vertical tabs-left" id='nav'> <ul class="nav nav-tabs" id='navUl'> </ul> </div> 

You can use that if statement to do what you want. If you attach it to $(window).resize(); event you can update it to add the styles and remove them responsively.