The use of scaffolding and grid structures within the Twitter Bootstrap framework

I'm currently utilizing the bootstrap scaffolding/grid system in the following manner:

<div class="row-fluid">
    <div id="insta-shop-filter" class="span2 visible-desktop">

    </div>
    <div  id="insta-shop-grid" class="span10">

    </div>
<div>

One thing I noticed is that by adding 'visible-desktop' to insta-shop-filter, it disappears on non-desktop screens. However, my goal is for insta-shop-grid to span the full width when insta-shop-filter is hidden, essentially becoming a span12. Is there a way to achieve this without relying on javascript/jQuery and monitoring window events?

htmlcsstwitter-bootstrap

Answer №1

To customize your styling based on different devices, try using CSS3 media queries. For example, you can create a media query targeting devices with a width of 640px or 480px like the following:

@media screen and (max-device-width:640px){
  #insta-shop-filter{
     display:none;
  }
  #insta-shop-grid{
     width:640px!important;
  }
}

It's worth mentioning that it is recommended to avoid using !important whenever possible.

Answer №2

If you are using Bootstrap 2, it doesn't seem like there is a straightforward way to achieve this without either overriding the style with a custom CSS media query (as suggested by @Conqueror) or dynamically adding/removing classes in JavaScript.

But I'd like to highlight that Bootstrap 3 has made this easier with the use of col-SIZE-SPAN, as explained here. In your scenario, it would look something like this:

<div class="row-fluid">
    <div id="insta-shop-filter" class="col-md-2 hidden-sm">

    </div>
    <div id="insta-shop-grid" class="col-md-10 col-sm-12">

    </div>
<div>

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

Can the URL of a static HTML be altered without modifying the file name?

Is there a method to modify the URL of an HTML file without altering its filename? For example, if my website has a page named 1.html, is it possible to show it as mypagename.html to both visitors and search engine crawlers? ...

html

col-md is taking precedence over col-sm at lower screen resolutions

Col-md takes precedence over col-sm in Bootstrap 4 https://i.sstatic.net/ydL5O.png ...

cssbootstrap-4

My experience with jquery addClass and removeClass functions has not been as smooth as I had hoped

I have a series of tables each separated by div tags. Whenever a user clicks on a letter, I want to display only the relevant div tag contents. This can be achieved using the following jQuery code: $(".expand_button").on("click", function() { $(th ...

javascriptjqueryhtmlcss

Is it possible to utilize a JS script generated within the body or head of an HTML file directly within CSS code?

As a beginner in webpage development, I have a query regarding the technical aspect. Is it possible to utilize variables from a JavaScript function, which is placed either in the head or body of an HTML file, directly in CSS code to make modifications such ...

javascripthtmlcss

Is it possible to create an AngularJS and jQuery Calendar Directive that activates by clicking on a Bootstrap glyphicon?

I have successfully created a directive for my calendar using AngularJS and jQuery. The datepicker pops up when the user selects the input box. Now, I am attempting to allow the user to click on Bootstrap's 'glyphicon glyphicon-calendar' to ...

javascriptjqueryangularjstwitter-bootstrapangularjs-directive

Issue with Bootstrap margins and padding

While creating an application form from scratch with Bootstrap, I encountered a peculiar issue. The element with ID officeaddress is missing from the HTML page upon loading. I've experimented with the my class in Bootstrap and attempted to add line br ...

htmlwebfrontendbootstrap-5

Ensure that the text within the ng-repeat is wrapped in a span element and each

When using ng repeat in span, I encountered a word breaking into a new line. Here is the actual output: https://i.stack.imgur.com/k4c9k.png To style this, I implemented the following CSS: border: 1px solid #ECE9E6; border-radius: 3px; text- ...

htmlcssangularjs

`Unable to activate label function in HTML`

As I dabble around with HTML and CSS, I've been experimenting with creating a custom file selection button. I came across a method on the internet that involves hiding the original button and superimposing a new one over it using the following code: ...

htmlcss

Incorporate PHP functionality into an HTML document

I'm looking to incorporate a PHP code into my phoneGap application (HTML). I've attempted the following code, but unfortunately it's not functioning as expected. <html> <head> <title>PHP Integrated with HTML&l ...

phphtmlcordova

Place an element in a higher position than a slideshow

I recently encountered an issue where I was trying to place a png image above my slideshow. Despite trying various solutions, the image always appeared behind or on top without transparency. Based on the erratic display, it seems like the problem might be ...

jqueryhtmlcsscss-positionslideshow

Removing empty commas from a string with JQuery

I am looking to utilize JQuery to eliminate any empty commas from a given string. Take a look at the provided images for further clarity. ...

htmljquerystring

Vue component retrieval on the client side

I am attempting to retrieve a component using Vue with cdn in order to dynamically re-render from a public project that contains a file named cash-sale.vue with the .vue extension. <script> export default { data(){ return { "rows&quo ...

htmlvue.js

Difficulties encountered when attempting to use a background image for shadow effects within a CSS design

I have been learning from a tutorial on how to create a fixed tabless CSS layout, starting from Photoshop and ending with HTML+CSS code. Here is the final example suggested by the tutorial (how it should look like in the end): And this is my own version ...

htmlcsslayoutxhtml

concealing elements using negative margins on tablet devices

I have an animated element on the ipad, moving from -200px to 1500px and being hidden due to overflow-x:hidden in the browser. However, when viewing this on the ipad, I am able to scroll "off screen" and reveal the hidden items, despite setting the body a ...

cssipadcss-transformsmargins

Attempting to incorporate images alongside menu items

Here is a list of menu items. Please take note that I have assigned the image class to the City menu item. <p:submenu label="Address"> <p:menuitem value="Country" url="/secured/country.xhtml?redirect=true" /> <p:menuitem value="Stat ...

htmljsfprimefaces

What is the method to run a script within a particular div?

Here is an example of the DOM structure: <div> <button>Click me</button> <img src=#> </div> <div> <button>Click me</button> <img src=#> </div> <div> <button>Clic ...

javascriptjqueryhtmldom

CSS selector that targets elements within a specified parent element

Imagine a scenario where there are numerous divs in an HTML document, like the three examples provided below: <div id="1"> <p>hi</p><p>Peter</p> </div> <div id="2"> <p> hola</p><p>Peter&l ...

csscss-selectors

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

javascripthtmlsvg

Is it advisable to opt for window.webkitRequestAnimationFrame over setInterval?

Trying to figure out the best method for moving game characters in my JavaScript game - should I go with window.webkitRequestAnimationFrame or stick with setInterval? Any advice is appreciated! ...

javascripthtmlsetintervalrequestanimationframe

jscrollpane does not work properly in Firefox, but it functions correctly in Chrome

I am currently utilizing jScrollpane to display a combination of images and a div in a horizontal format. While I have successfully implemented it on Chrome, it appears that Firefox is not applying the CSS correctly to prevent images from wrapping, resulti ...

jqueryhtmlcssjscrollpane