Different Div Sizes Based on Device Type (Bootstrap)

I am currently working on a Bootstrap 3 website and have several small divs displayed on the page. I want to adjust their size for desktop view and make them full width for mobile view.

Here is my approach:

I attempted to place each small div within a column and set the width to 100%, but it did not produce the desired outcome:

Since I am relatively new to using Bootstrap, I wasn't sure where to find the solution. After researching on the w3 schools website, I came across information about box-sizing, however, it didn't yield the results I was looking for.

I found a similar question here, but the answer was a bit confusing and I preferred not to revive an old thread.

Can anyone provide guidance on how to achieve this effect?

Your help is greatly appreciated!

htmlcsstwitter-bootstrap

Answer №1

To split the container into 4 columns, you can use the col-md-3 class. This class specifically targets screens larger than small devices.

If you want to delve deeper into the grid system, check out this resource: Bootstrap Grid

[class^=col] {
  background: tomato;
  color: white;
  font-weight: bold;
  /* Use these properties to add margin between columns */
  background-clip: padding-box; 
  border: 5px solid transparent;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row text-center">
    <div class="col-md-3">
      1
    </div>
    <div class="col-md-3">
      2
    </div>
    <div class="col-md-3">
      3
    </div>
    <div class="col-md-3">
      4
    </div>
  </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

Is there a way to adjust the width of my editor file in vscode to prevent the need for horizontal scrolling when reading a paragraph to the end?

My lorem ipsum text in vscode is displaying as one long line, forcing me to scroll horizontally instead of seeing it formatted into paragraphs. https://i.stack.imgur.com/LIja8.png Is there a way to adjust the width of the editor box to prevent the need f ...

htmlvisual-studiovisual-studio-codecode-editor

Having trouble with the alignment of the product grid on Woocommerce with the Wootique theme?

Hey there, I've been facing an issue with the woocommerce product display grid layout. The items keep getting misaligned, with one on a line and the others right next to each other. I attempted to fix it by adding some custom CSS code: .woocommerce ...

htmlcssajaxwordpresswoocommerce

Having trouble getting the vertical menu animation to work with jQuery

Essentially, I am facing an issue with a <nav> element that is supposed to expand from left to right upon mouseover. However, sometimes when quickly moving the cursor over and then out of the element, it expands without animation, which should not be ...

jqueryhtmlcsstwitter-bootstrapjquery-animate

What is the best way to position text below an image icon in a menu?

I am having trouble creating a menu that has the same style as shown in this image: . Unfortunately, my menu ends up looking like this instead: . Can someone please help me fix this issue? Here is the HTML code I am working with: <header> ...

htmlcssmenu

When working with ajax, you can easily refer to elements by using the $(this)

I am having trouble using the $(this) selector in the ajax success function to target the element with the class .selectclass that was double-clicked before. Any suggestions on how to make this work within the ajax success function? Here's the jQuery ...

jqueryhtmlajax

Update the CSS classes exclusively for the specified ID

Attempting to modify and override certain classes within the complex control (dxList) of DevExtreme has been successful thus far. .dx-loadpanel-content { transform: translate(0px, 0px) !important; margin: auto !important; left: 0px !important; ...

htmlcsscss-selectors

Avoiding white spaces in user input with Material UI (MUI)

<FormControl variant="standard"> <InputLabel className="input-box-label" htmlFor="component-helper">My Value</InputLabel> <Input id="component-helper" value={m ...

htmlreactjsformsmaterial-ui

Incorporate hover and click functionality to the dropdown button using JQuery

Recently, I implemented hover and click events to trigger the opening of a dropdown content The functionality is mostly working as expected but there is a slight issue When hovering over the element, the content opens and closes properly However, on the ...

jquerycss

Unresponsive HTML button

I'm currently developing an interactive text-based game that relies on button functionality to change text content. Everything was functioning perfectly until just a few moments ago, but now it has inexplicably stopped working. Here is the section of ...

htmlcssjscript

Conceal the Div containing the specified class

I was hoping to hide the first DIV if the second DIV is displayed on the front end, and vice versa upon page load. If the first DIV is set to 'block,' then the second DIV should be set to 'none.' And If the second DIV is set to &apos ...

javascriptjquerycss

What is the best way to resize a SWF file within an HTML page?

Within the Stage class, both stageHeight and stageWidth properties can be modified. Is there a method to embed the swf file in a way that any changes made to these properties are automatically reflected on the HTML page? Is it possible to achieve this wit ...

htmlactionscript-3flash

Verifying the "select" dropdown option prior to final submission

My website features multiple select dropdowns that require validation before submission. For instance, there may be a situation where seven select dropdowns are present as described below. My desired validation criteria is: If there are 5 or more "sel ...

javascriptphpjqueryhtml

Ways to eliminate the default button styling

I've encountered an issue with the CSS for a button that I created, as it is not displaying as expected. https://i.sstatic.net/qHLZX.png Below is my HTML code snippet: .button{ /* center the button */ margin: 0; position: absolute; top: ...

htmlcss

Why isn't my CSS button changing color on hover?

div ul li a.button:hover { text-color:#FF0000; background: #0040FF; } I have been attempting to create buttons that change color and text when hovered over. Despite trying different methods, the changes do not seem to be taking effect. Below is the co ...

htmlcss

Adjust the position of the div so that it remains visible as you scroll

Is it possible to position an element within a container that contains a wide table with overflow property so that the element remains visible while scrolling horizontally through the table data? <div id = "mainContainer" style = "width:300px; overflow ...

jquerycss

Is there a way to insert a value into the input field using JQuery or JavaScript?

After reading my previous post on posting values into an input box, a commenter suggested using JQuery or Javascript. For more code and information, please refer to the link provided above. <label>Date</label>:&nbsp&nbsp <input sty ...

javascriptjqueryhtml

Can someone assist me with updating the image source for it to display correctly within the div element?

I am currently working on a code that displays the URL (data-owner_logo) in my div after indexing JSON. Rather than just displaying the URL string, I want the actual logo image to appear in the div: $('a').on('click', function () { ...

htmljsonimageurl

A distinctive noise is heard when hovering over multiple instances of a div

I'm trying to implement a feature where a unique sound plays when hovering over a specific div element with a particular class (.trigger). However, I am encountering an issue where multiple instances of this div class result in the same sound being pl ...

javascriptjqueryhtmlaudiohover

What steps should I take to eliminate the white gap between the paragraph and the footer on my webpage?

If you're new to html and css, feel free to check out the url [file:///Users/CatherineDu/百度云同步盘/practice/about.html]. I'm currently working on building a simple website and facing an issue - there are unwanted white spaces between the ...

htmlcss

problem with selection of date and month in dropdown list with jquery

Recently, I've been dabbling in jQuery and decided to create two list boxes using it. One box contains dates while the other contains months. It's quite handy since I need them in different sections of my HTML page. However, when attempting to en ...

jqueryhtmlcss