Conceal and reposition divs based on device with Bootstrap's responsive utilities

Utilizing Bootstrap to design a layout that adapts to desktop, tablet, and mobile screens. The desired output is depicted below:

In order to achieve this, three divs were created:

<div class="row">
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
  <div class="col-md-3">Text</div>
</div>

The middle div should be hidden on tablet view, then the last div will move under the first on mobile view.

On desktop, all three divs display properly, however, on tablet and mobile they collapse vertically.

Is there a simple way to accomplish this with Bootstrap, or do custom CSS media queries need to be written?

htmlcsstwitter-bootstrap-3

Answer №1

If you wish to conceal the center div, consider using Bootstrap utility classes:

Bootstrap 3

Refer to the Bootstrap documentation

To hide the div on tablets and phones, utilize the visible-lg class.

I recommend utilizing col-sm and col-xs for collapsing or maintaining the div based on screen width (Learn more about the grid system):

<div class="row">
  <div class="col-sm-3 col-xs-9">Text</div>
  <div class="col-sm-3 visible-lg">Text</div>
  <div class="col-sm-3 col-xs-9">Text</div>
</div>

Check out this fiddle

Bootstrap 2.3

Bootstrap documentation

For hiding the div on tablets and phones, use the visible-desktop class.

Answer №2

.container {max-width:100%;position:relative;}
.col-lg-4{width:33.33333%;float:left;padding:10px;height:200px;}

Answer №3

Aside from the response by @Getz, I recommend checking out these additional resources that delve into your concerns in depth.

To specifically target a device, use min-device-width. For instance:

For iPhones

@media only screen and (min-device-width: 480px){
.middle_div { display: none;}
/* other responsive styles*/
}

For tablets

@media only screen and (min-device-width: 768px){
.middle_div { display: none;}
}

An ideal solution to cater to various devices is as follows

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer №4

<div class="row visible-lg">
  <div class="col-md-4">Content</div>
  <div class="col-md-4">Content</div>
  <div class="col-md-4">Content</div>
</div>

<div class="row visible-md">
  <div class="col-md-6">Content</div>
  <div class="col-md-6">Content</div>
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Content</div>      
 </div>
<div class="row visible-sm">
  <div class="col-md-12">Content</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

Creating an AngularJS directive specifically for a certain <div> tag

Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class=" ...

javascripthtmlcssangularjs

Learn how to collapse a list by clicking outside of it on the document with the following code: $(document).on("click"

I want to create a collapsible/expandable menu for my website. I had a version where hovering over a category would expand the subcategory, but what I really need is for the subcategories to expand when I click on a category and remain expanded until I cli ...

javascripthtmlcss

What could be causing the flex item to be wider than its container?

One issue that can arise when utilizing flexbox is the scenario where, as demonstrated below, the content exceeds the width of the viewport causing the flexbox items to become wider than their container. What are the factors contributing to this situat ...

cssflexbox

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles

I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...

javascripthtmljquerycsstwitter-bootstrap

Stop the text from wrapping to the full width of its parent when it overflows onto the following line

When I shrink the width in responsive design, the text overflows to the next line and the text wrapper expands to fit the parent container. Is there a way to prevent this behavior so that it looks like the red container? I could add padding to the contain ...

htmlcss

JavaScript will continue to process the submit to the server even after validation has been completed

My current challenge involves implementing form validation using JavaScript. The goal is to prevent the form from being sent to the server if any errors are found. I have made sure that my JavaScript function returns false in case of an error, like so: ...

phpjavascripthtmlvalidation

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss

Why is a div nested inside an overflow: hidden; div not expanding to the full width of its content?

.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...

javascriptcssreactjs

Upon hovering, icons for each project name are displayed when `mouseenter` event is triggered

My issue lies with the mouseenter function. I am trying to display icons specific to the project name I hover over, but currently, it displays icons for all projects at once. I want each project hovered over to show me its respective icons Below is some c ...

htmlcssangulartypescript

I am struggling to remove the div from its normal flow as it stubbornly remains positioned below

Is there a way to add a "contact" card to my website's right-top corner in a sticky position? I currently have a div block in that area which is blocking the contact card. Can anyone suggest a solution for this? https://i.stack.imgur.com/umC7B.jpg &l ...

htmlcsstwitter-bootstrap

Angular is sending a parameter with a null value, which is not supposed to happen

My filtering system used to work well with a code that displayed items of specific status. However, I had to modify it to match a select input requirement. <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button- ...

javascripthtmlangular

Keep moving the box back and forth by pressing the left and right buttons continuously

Looking to continuously move the .popup class left and right by clicking buttons for left and right movement. Here is the js fiddle link for reference. This is the HTML code structure: <button class="right">Right</button> <button class="l ...

javascriptjqueryhtmlcssjquery-animate

Creating a directive that dynamically expands templates for varying blocks of code based on different ng-repeat values

I have a snippet of code that I want to reuse across various HTML pages. The code in question is as follows: <h5>Brand</h5> <div> <div ng-repeat="brand in store.brands.tops"> <label> <input type="checkbox" ng-t ...

htmlangularjs

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Is there a way to view partial HTML templates locally without copying them into the main index.html file? I'm looking for a solution that allows me to access my partial templates through a local URL without having to manually paste them into the main ...

javascripthtmlcssurl

Issues with Internet Explorer's scaling functionality are preventing it from operating correctly

I've utilized d3 to create a map. Its width is dynamically set based on the parent div's (with the id "map") width, and its height is calculated with a ratio of 5/9 in relation to the width. The viewBox attribute has been defined as "0 0 width he ...

javascriptjquerycsssvgd3.js

Looking to locate .zip files using PHP Simple HTML DOM Parser?

Just started using PHP Simple HTML DOM Parser and I'm attempting to display links that have either a .zip or -animal.jpg at the end, but I seem to be stuck. I've done some searching online, but unfortunately, all I see below is a blank screen. ...

phphtmlsimple-html-dom

unassigned variables in a PHP email submission form

My PHP email form is not sending emails because my variables are coming up as null. I have an echo statement after my code to check if the variables have values, but they are not being printed. Only 'done' and 'email $to' are showing up ...

phphtml

Crafting a dynamic inline search form with Bootstrap

My goal is to replicate the design in this image: This is my current progress: ...

htmlcss

How to Enhance Your MUI DataGrid Rows with Borders

Trying to customize the borders of Material UI DataGrid rows to achieve a design similar to this screenshot (with some info censored): https://i.stack.imgur.com/0xRFd.png The issue I'm facing is that I'm unable to display the right border correc ...

cssreactjsmaterial-uidatagrid

What is the best way to retrieve the content of HTML tags from a string using JavaScript or AngularJS?

I have a string with mixed content of HTML tags and text. Here is an example: var str = "<p></p><p><i>blabla</i></p><p><i><b>blaaaaaablaaaaa</b></i></p><iframe src="..." height=" ...

javascripthtmlangularjs