Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Question

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Consider this scenario

<div class="col-md-my">
</div>

.xx {
   color: black;
}

.yy {
   color: red;
}

Similar to how Bootstrap adjusts width at different breakpoints.

Create a new class called col-md-my

When the width exceeds the md breakpoint, the CSS will apply the class xx

When the width is below the md breakpoint, the CSS will apply the class yy

xx and yy are custom CSS classes.

How can this be achieved using Bootstrap variables and functions?

html css bootstrap-5

Answer 1

Answer №1

Details:

Content within this query (anything prior to 576px):

@media (max-width: 575.98px) { 

  .custom-txt-color {color: #000000;}

}

..will be displayed in black (#000000)

Upon reaching 576px:

@media (min-width: 576px) and (max-width: 767.98px) { 

  .custom-txt-color {color: #666000;}

}

..it will change to dark green (#666000)

In the absence of a max-width, it remains as follows:

@media (max-width: 575.98px) { 

  .custom-txt-color {color: #000000;}

}

.....text is black initially, then transforms to:

@media (min-width: 576px) { 

  .custom-txt-color {color: #666000;}

}

.....as it becomes dark green and retains that color due to no specified max width.

An efficient tool for testing screen sizes<<<<

Handy breakpoint code snippet: (sourced from Bootstrap 4.6 directly):

/* Extra small devices  (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* Small devices  (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Answer 2

Details:

Content within this query (anything prior to 576px):

@media (max-width: 575.98px) { 

  .custom-txt-color {color: #000000;}

}

..will be displayed in black (#000000)

Upon reaching 576px:

@media (min-width: 576px) and (max-width: 767.98px) { 

  .custom-txt-color {color: #666000;}

}

..it will change to dark green (#666000)

In the absence of a max-width, it remains as follows:

@media (max-width: 575.98px) { 

  .custom-txt-color {color: #000000;}

}

.....text is black initially, then transforms to:

@media (min-width: 576px) { 

  .custom-txt-color {color: #666000;}

}

.....as it becomes dark green and retains that color due to no specified max width.

An efficient tool for testing screen sizes<<<<

Handy breakpoint code snippet: (sourced from Bootstrap 4.6 directly):

/* Extra small devices  (portrait phones, less than 576px) */
@media (max-width: 575.98px) { ... }

/* Small devices  (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Creating a custom breakpoint in Bootstrap for adding unique CSS styles

Answer №1

Content within this query (anything prior to 576px):

..will be displayed in black (#000000)

Upon reaching 576px:

..it will change to dark green (#666000)

Similar questions

Enhancing an element by incorporating animation into its active state

Ensure that the select boxes are aligned in a horizontal manner

Unable to consistently select a radio button via code across different browsers

Activate the button when the password is correct

Ways to ensure text fits nicely within a container: HTML & CSS

Problem with custom validation in Bootstrap 5

What is the reason that a <button> tag is unable to include a <div> element within it?

What could be causing my Time Picker MUI to malfunction in my React project?

Establish a variable in XSL to define the tabIndex

Find and conceal the object within the list that includes the term "Ice"

The jQuery scrollLeft function seems to be stuck and not working correctly

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

What is the best way to attach multiple files in PHP using mail.php and mime.php from Pear library?

Bootstrap 4 row featuring bottom-aligned buttons on both the left and right sides of the container

What is the best way to position the top line next to the border?

Styling elements with CSS to display inline blocks next to each other while taking up the full

Adjust the sidebar size in Bootstrap 5 to align perfectly with the navbar brand

Effortless 'rotational' script

Managing post and session data during PHP form submission

extracting information with beautifulsoup