Do designers often manually adjust elements using media queries when working with Bootstrap?

Is it common practice to directly invoke media queries in order to manually adjust the layout of elements when using Bootstrap?

In other words, if I have a custom element that I need to display or position in a specific way, is it acceptable to call the media query directly and make adjustments there, or should I strive to utilize Bootstrap's classes to achieve the desired behavior?

For example...

// Invoking the media query
@media (max-width: 768px) { 
      .my-element {
        background: red;
    }
}

Just a heads up - By "calling media queries" I mean utilizing the default media queries in Bootstrap, such as 750px, 970px, and 1170px.

Appreciate your input.

htmlcsstwitter-bootstrapmedia-queries

Answer №1

If you're utilizing media queries with predefined bootstrap breakpoints, there should be no issue at all. It will be necessary to use them in some cases.

One important thing to keep in mind is to avoid modifying bootstrap classes.

For instance, let's say you have a div like this--

<div class="col-md-6">

across your page. The default width for this element is 50%. Now, if you want it to have a 25% width for a specific div on a certain screen size, do not do it like this--

@media (min-width: 768px) { 
  .col-md-6{
    width: 25%;
  }
  }

The above example will override the bootstrap class throughout the page, which is not recommended.

So, what's the solution?

You should assign an id/class to the element and then style it. Like this--

<div id="myelem" class="col-md-6">

and then style it using the id.

@media (min-width: 768px) { 
  #myelem{
    width: 25%;
  }
  }

That should resolve the issue without any problems.

Note:

Always make sure to include your custom CSS file after the bootstrap CSS. Otherwise, Bootstrap will take precedence over your custom styles.

I hope this explanation helps!

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 it necessary to alter the number of rows or columns in the table?

I'm having an issue with my code where the table is not changing the number of rows based on the selected input option. It seems to only read the first value of the select id and does not update the rows accordingly. Can someone help me identify the m ...

javascriptcsshtml-table

What steps can I take to improve the design of this layout created using Twitter Bootstrap?

Currently, I am designing a sample form layout using Twitter Bootstrap. The form displays fields horizontally, with a link between each field. My goal is to have bullet points appear on the right side of the fields when the link is clicked. However, the al ...

htmlcsstwitter-bootstrap

Are programmatic clicks distinguishable from manual clicks in JQuery?

Currently, I am in the process of creating selectable and draggable elements for a table. You can test the functionality by following this JsFiddle link (please try vertically selecting). Initially, the selection works well but upon trying to select for th ...

javascriptjqueryhtmlcss

The reason behind the clickable issue with my duplicate <ion-select>

I've been working on a form using HTML, CSS, and JavaScript where I implemented an "Add" button to duplicate the form. The issue arises with the ion-select element within the duplicated form. While the original form displays all predefined options upo ...

javascripthtmltypescriptionic-framework

Animation of disappearing blocks covering the entire screen

I am currently working on creating a slider with fading blocks animation similar to the one shown here. The challenge I am facing is making it fullscreen, where the height and width will be variable. This makes using the background-position trick ineffecti ...

javascripthtmlcssanimation

Issue with displaying hamburger menu items when using data-toggle in Angular

I've been diving into learning Angular and Bootstrap lately. I wanted to merge some existing HTML content into an Angular component, but ran into issues with its functionality. When I attempt to toggle the hamburger menu icon, nothing happens, and the ...

jqueryhtmlangular

Exploring the Power of Selenium in Python: Automating the Clicking of Expand Links Without Identifiers

Struggling to fill out a form in IE9 using Selenium and Python. The form is loaded with 'Expand/Collapse' links, all identical except for the text labels. No ID on them, just 'style' and 'onclick' attributes (though there migh ...

pythonhtmlseleniumexpand

Troubleshooting: Why isn't my jQuery Click Event functioning in Mozilla but working perfectly fine in

While I know this question has been asked before, I can't seem to locate the posts I remember reading about it. I apologize for any duplication, but I am trying to implement a "click anywhere BUT here to close element overlay" effect on my personal we ...

jqueryhtmlgoogle-chromemozilla

apply CSS to highlight a clicked div as if it were a radio button

Is it possible to use CSS to highlight a div when clicked (when the div is acting as a label for a radio button)? Here is my code: <?php foreach ($images as $image) { ?> <input type="radio" name="id" value="<?php echo $image['id& ...

phpjqueryhtmlcss

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

javascriptcssvue.jsvuejs2

Troubleshooting ng-bind-html issue with displaying images loaded using CSS within HTML content

I followed the instructions provided in a related post on the same topic. I used 'ngSanitize' and formatted the HTML content using 'sce.trustAsHtml()', and it rendered correctly when the HTML contained both text and images. However, I e ...

javascriptcssangularjsng-bind-html

Add extra space to the dimensions of the div by incorporating padding

Showing my issue with an accompanying image: I am looking for a solution to include padding in the width: 50%; calculation. Currently, the first div's width is actually 50% + 2em because the padding was not factored in initially. Is there a way to i ...

htmlcsswidthpadding

Submitting a form using jquery in HTML

Below is the code I have created. It consists of a text-input field and a 'Search' button within a form. Upon clicking the search button (submitting the form), it should trigger the .submit function to carry out the necessary processing. HTML CO ...

jqueryhtmlajaxformssubmit

Transferring Data Between Two Forms

Is there a way to transfer data between two HTML forms? For example, let's say we have two forms: Form 1: Contains a field for name and a submit button. Form 2: Contains fields for name, email, and a submit button. I would like to be able to fill o ...

phpjavascripthtmlforms

Display a different div when hovering over an li element

Within my HTML, I have two div elements. The first div is filled with Menu items represented by li elements, while the second div contains submenus. My desired functionality involves displaying the submenu when hovering over a menu item's li element u ...

cssmousehover

Tips for displaying multiple rows horizontallyALLOWING multiple rows to appear horizontally can be achieved by

This is a demonstration of my desired outcome https://i.sstatic.net/UErvL.png However, I am currently only able to show one product per row. I have attempted the following approach, but it is not functioning as expected. <ol> <?php $no = 1; ...

phphtmlcssphp-7

maintain visibility of website menu while scrolling

I am having trouble getting my drop-down menu to stay fixed at the top of the screen while scrolling down on my website. Despite several attempts, I have not been able to achieve this using the current CSS and menu setup. Can someone please assist me wit ...

javascriptjqueryhtmlcssstatic

Applying CSS link dynamically in NextJS based on the window width

Is it feasible to adjust NextJS link stylesheets depending on media queries in the context of using css modules? Here is an example: CSS module file: @media(max-width: 800px) { .myClass{ /* ...mobile styles */ } } @media(min-width: 800px) { .myC ...

cssnext.jscss-modules

Inconsistent and non-uniform sizing of table cells (<td> tags)

I'm currently working on creating an HTML table to use as the formatting for a banner and menu links on my website. However, no matter how much I adjust the size and margins, the menu link tags just won't seem to stay at an even size. <table ...

asp.nethtmlvisual-studiorazor

Adjustments in Spacing for Text with Significant Digits

It has come to my attention that in the United States, large numbers are often formatted with a comma between thousands, like so: $1,000,000.00. Here in South Africa, using a comma as a thousands separator is not standard practice, as it is more commonly u ...

cssnumber-formattingkerningletter-spacing