The arrangement of Bootstrap tabs shifting when the system resolution is adjusted

https://i.sstatic.net/PoNFX.pnghttps://i.sstatic.net/dEDAA.jpgMy website utilizes bootstrap tabs, but I've noticed that as I adjust the screen resolution, the tabs do not respond properly and end up positioned incorrectly. How can I ensure that the tabs remain in the right place regardless of the resolution?

Check out the code snippet below:

<div class="container" id="toptab" style="position:absolute;top:10px;">
 <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-12">    
       <ul class="nav nav-tabs">   
          <li id="tab1" class="active">
             <a href="${ctxRoot}/app/user/hours/populate" data-toggle="tab">My Hours</a>
          </li>
          <li id="tab2">
             <a href="${ctxRoot}/app/user/hours/reviewHours" data-toggle="tab">Review Hours</a>
          </li>
       </ul>
    </div>
  </div>
</div>

I've included screenshots of the tabs at 1920 resolutionhttps://i.sstatic.net/RsQ7X.jpg and at 1280 resolution for reference.

jquerycsshtmltwitter-bootstrap-3

Answer №1

When setting a grid cell with the values col-sm-3 col-md-6 col-lg-12, this indicates:

- For screens that are small (768 to 992px width), it will use 25% of the width.
- For medium screens (992 to 1200px), it will use 50% of the width.
- For large screens (>= 1200px), it will take up the entire width.

To adjust accordingly, you might want to switch it to:

<div class="col-sm-12 col-md-6 col-lg-3">

For more information on bootstrap grids, check out: link

Here's a Fiddle for reference.

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

How to Use JQuery to Verify If None of the Elements in a Selection Have Multiple Classes Assigned

UPDATE: Jared provided the solution to my issue by adding an else statement to handle hiding/showing list items when there is a matching set. $(document).ready(function() { $("form#filterForm").submit(function () { var type = $("select#typeList option ...

jqueryfunctionjquery-selectorsfilter

Utilize JavaScript to assign an identifier to an element created with createElement()

As a beginner in JavaScript, I am trying to set an id into some created tags but it doesn't seem to be working. var d1=document.createElement("div"); d1.setAttribute("class","container"); var b3= document.createElement("button"); b3.setAttri ...

javascripthtml

Error in JavaScript: Uncaught TypeError - Unable to access the "left" property of an undefined object

This error is really frustrating and I've come across several inquiries regarding this console issue. It's not providing enough information in the chrome console for me to effectively troubleshoot. /** * Adjustment of dropdown menu positio ...

javascriptjquerycssconsole.log

Unable to receive AJAX response for the GET request

I am attempting to achieve the following: Upon clicking on H1, jQuery is supposed to retrieve information for a specific key from the server and display it in a prompt. The PHP code resides in server.php. $link = mysql_connect("mysql.hostinger.com.ua", "_ ...

phpjqueryajaxjson

Tips for making li elements scroll horizontally whilst fitting all elements on one line exclusively using CSS

I am attempting to alter the default scrolling behavior of li elements from vertical to horizontal in HTML. I have successfully achieved this, but the output displays a succession of lists in a line, followed by another list below it. However, I desire to ...

htmlcss

Is there a more efficient way to optimize my coding for this Cellular Automata project?

As a beginner in programming, I wanted to delve into the world of cellular automata and decided to create my own using JavaScript. The project involves a simple binary (black and white) 2D CA where each cell updates its color based on the colors of its 8 ...

javascripthtmlcellular-automata

"Creating a dynamic dropdown menu and sub-menu in PHP using MySQLi with unique slug values

I need to generate a dynamic menu from the database, including main menus and submenus. For instance: <li class="<?= ($pg == 'departments') ? 'active':''; ?>"> <a href="departments">Departments</a> ...

javascriptphpjquerydrop-down-menusubmenu

Tips for parsing information contained in a cdata tag using python

I have successfully used Beautiful Soup to extract CDATA from an HTML page, but now I need to parse the contents and save them in a CSV file. Here is the code I am using: from bs4 import BeautifulSoup from urllib.request import urlopen import re import c ...

pythonhtmlxmlbeautifulsoupcdata

Printed plaintext of CSS & jQuery code on the 200th iteration in PHP

I encountered an issue while working on a script that involved displaying query data based on domain type (referred to as typeX & type Y). To achieve this, I utilized the jQuery slidetoggle function along with some CSS. Everything was functioning perfectly ...

phpjqueryhtmlcss

What if we started using PT as the standard unit for measuring fonts and element size?

Currently, I am in the process of creating a mobile app that will work across different platforms using jQueryMobile and PhoneGap. My initial focus is on developing for Android. When it comes to Android app development, it is recommended that developers u ...

androidcssjquery-mobilefont-size

Tips on retrieving a specified string from within an array of strings

I need help extracting the inner string from this array within a string: '["sgrdalal21"]' Can someone provide guidance on how to accomplish this? ...

javascriptjquery

What could be causing the issue of this JQuery dropdown plugin not functioning properly on multiple dropdowns?

I have implemented a JQuery plugin for dropdown menus that can be found at the following link: https://code.google.com/p/select-box/ Currently, I am facing an issue where the script only seems to work for the first dropdown menu out of 4. I am unsure abo ...

javascriptjqueryhtmldrop-down-menu

Avoiding redundant ajax requests from jquery datatable during server-side pagination

My jquery dataTable is currently set up to send a request to an MVC controller using ajax for data retrieval. While client side processing works fine, the response time is far too slow as it retrieves all records at once. To improve speed, I need to imple ...

javascriptjqueryajaxasp.net-mvcdatatables

Tips on moving the inner rectangle within the outer rectangle

I am currently trying to center the innermost shape (the red shape) along the X-axis to the middle of the outermost shape (the black shape), while ensuring that the red shape remains within its direct parent, which is the blue shape. For instance, centeri ...

javascriptcssmathcanvasgeometry

Ways to effectively pair a radio button with a dropdown menu

function radioCheck() { document.getElementById("last").checked = "checked"; } <label> <input type="radio" name="Ppub" value="" checked="checked">All Dates </label> <br> <label> <input type="radio" id="last" name="Ppu ...

javascripthtml

Wrapping a group of elements with opening and closing tags using jQuery

I have a collection of distinct elements, like so: <section class="box-1"></section> <section class="box-2"></section> <section class="box-3"></section> My objective is to enclose all three elements within a div with a ...

javascriptjquerywrapall

What is the process for including echo HTML field in the WooCommerce order view?

I have successfully added HTML input fields within functions.php. However, these echoed fields are not displaying in WooCommerce orders after placing an order. I am looking for a way to include the values and labels of these fields in the orders view wit ...

javascriptphpwordpresshtmlwoocommerce

Can someone please provide me with a Javascript code snippet that accomplishes the same function

<script> document.addEventListener('DOMContentLoaded', function () { const menuItems = document.querySelectorAll('.headmenu li'); menuItems.forEach(function (menuItem) { menuItem.addEventL ...

javascriptcss

How to Detect Font Resizing in Google Web Toolkit (GWT)

I am trying to find a way in GWT to capture the font resize event that occurs when the user changes the size of the font by using Ctrl-Mouse Scroll or going to View -> Zoom. I have searched on Google and looked on StackOverflow but haven't found an ...

javascripthtmlgwtdom

Adding a dynamic script or function block using jQuery

UPDATED: Is there a way to insert a function block, static script, or a variable directly into the body of an HTML document? For example: $('body').add(function(){/../}) or $('body').append('<script></script>' ...

jquery