Removing the Bootstrap-container is a task that can be specifically targeted for larger screens

I need assistance with removing the container from my large screen while keeping it on small and medium screens. I have tried searching for a class like container-lg-none, but to no avail. Any help would be greatly appreciated. Here is the code snippet in question:

<section>
    <div class="container m-organism-category">
        
        <div class="row ">
            <div class="col-4 col-md-2 mx-lg-0 ">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid"alt="">
            </div>
            <div class="col-4 col-md-2 m-atom-round-img">
                <img src="http://assets.myntassets.com/dpr_1.5,q_60,w_400,c_limit,fl_progressive/assets/images/retaillabs/2021/1/28/85b47fa0-5e71-4f6d-bcf9-27946bd8d62f1611824554381-Kurta-Set.jpg" class="m-atom-round-img img-fluid" alt="">
            </div>
            <!-- more image columns here -->
        </div>
    </div>
    </div>

</section>
htmlcssbootstrap-5

Answer №1

BS5 has a plethora of utility classes available.

If you only need a container for medium and small sizes, simply replace:

<div class="container m-organism-category">

with:

<div class="container-md m-organism-category">

Alternatively, you can utilize container-float for larger sizes and container-md for medium and small sizes:

<div class="container-float container-md m-organism-category">

If you wish to remove the container entirely, you will need to reset the base class CSS. This can be done with the following CSS:

@media (min-width: 992px) {
  .un-container {
    max-width: inherit;
    padding: inherit;
    margin: inherit;
  }
}

(Place this within a <STYLE> tag or in an additional CSS file.)

Subsequently, update the HTML to:

<div class="un-container container-md m-organism-category">

(For SCSS compilation, utilize the breakpoint-min function within Bootstrap's mixins/_breakpoints.scss)

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

Conceal the scrollbar while navigating within the parent container

I'm currently working on implementing a parallax header on my WordPress site using the Divi theme. Below is the code I have so far: <div class="parallax"> <div class="parralax__layer parallax__layer--back"> <img src="https://crisp ...

cssscrolloverflowparallax

Dynamically switch between doubling Ajax calls in JavaScript

Encountering an issue with a jQuery click function. Triggering the click event on an HTML button dynamically loads styled checkbox and toggle switches based on their stored on/off state in a database. An additional click function is added to each loaded t ...

javascriptjqueryhtmlajax

What is a clear indication that a <div> is filled with text?

Picture a scenario where a website contains an element that needs to be filled with random text using JavaScript. Once the div is completely filled, it should reset and begin again. It may sound odd, but the question is: how will the JavaScript determine w ...

javascripthtmlcss

The tab content in VerticalTab Material React UI is spilling out and overflowing

Having some trouble with this particular component. Whenever I input content larger than my Grid size, it overflows the VerticalTab section. You can see an example of this in this codesandbox. Here's what I've attempted: return ( <div cla ...

htmlcssmaterial-ui

Error: Disappearing textarea textContent in HTML/TS occurs when creating a new textarea or clicking a button

I've encountered an issue with my HTML page that consists of several textareas. I have a function in place to dynamically add additional textareas using document.getElementById("textAreas").innerHTML += '<textarea class="textArea"></text ...

javascripthtmltypescripttextareainnerhtml

Imitating the Frameset Separator's Actions

The latest HTML5 specification has eliminated the <frameset> element. One useful feature of the <frameset> tag that is hard to replicate without it is: In a frameset, you can adjust the position of the frame divider line with the mouse. Is t ...

javascripthtmlframeset

Eliminate all blank spaces at the top and bottom of Span by squishing it

Imagine I have this code snippet: <span class="labels" style="background-color: #FFFFFF;border: 1px solid #000000;font-family: Verdana;font-size: 11px; ">74.58 ft.</span> I am looking for a way to compress the span element so that only the te ...

javascriptjquerycss

Printing Multiple Pages Using JavaScript and Cascading Style Sheets

Encountering difficulties displaying page numbers when printing multiple multipage reports Here is the provided HTML Format : <style type="text/css> body { counter-reset: report 1 page 0; } td.footer:after { counter-increment: page; content ...

javascriptjqueryhtmlcss

Enhance the appearance of specific wordpress usernames by adding a touch of "flair" next to them

I'm looking to add a special "flair" next to specific users on my WordPress website, similar to how YouTube distinguishes verified users. I have the CSS for changing the color on hover, but I need help keeping it positioned correctly. Examples from Y ...

htmlwordpresscss

Horizontal scrollbar displayed by CSS Bootstrap

Experimenting with Bootstrap on a small project and encountering an issue that I can't seem to figure out. Here is the snippet of my code: nav{ background-color: lightblue; } section{ background-color: lightgreen; } <link href="http://netd ...

csstwitter-bootstraptwitter-bootstrap-3

The placeholder within my input moves up and down when switching the input type from password to text

Currently, I am encountering an issue with the styling of a standard input element in React. Specifically, the placeholder text moves up and down by about 2px when viewed on Chrome, while there are no problems on Safari. How can I go about resolving this i ...

javascriptcssreactjstypescript

Possible for jQuery autocomplete to reposition the list?

Is it feasible for me to adjust the position of the dropdown list by moving it down 4 pixels? I've experimented with various styles within .ui-autocomplete {}. These include: margin-top: 4px; top: 4px However, these modifications don't appe ...

jquerycssautocompleteposition

Can you please provide instructions on how to implement an ng-repeat loop within an HTML table?

<thead> <tr> <th ng-click="sortData('firstname')"> Firstname <div ng-class="getSortClass('firstname')"></div> ...

htmlangularjsangularjs-ng-repeatsingle-page-application

The progress indicator fails to activate during the first step

As a beginner in coding, I wanted to incorporate a progress bar on my website. However, I encountered an issue where when I try to make step 1 "active", it's actually step 2 that becomes active, and the same pattern continues for subsequent steps. ...

htmlcsswebprogress-bar

Creating stunning visuals with the power of SVG

I need to create a graphics editor similar to Paint using SVG for a school project. I have JavaScript code for drawing shapes like circles and lines, but when I try to add them to an onClick function for a button, it doesn't seem to be working. funct ...

javascripthtmlcsssvg

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

javascripthtmlhoverjquery-isotope

Having difficulties with the edit function in JavaScript To Do Application

After creating an edit button to modify a task, it functions properly for the initial task I create. However, when attempting to edit subsequent tasks, the edit function defaults back to modifying the input of the first task instead. With each new ta ...

javascripthtmlbootstrap-5

Guide on how to vertically and horizontally center a heading text with dash-bootstrap

I have implemented the Bootstrap dash layout for my web application, but I want to place the text in the red area instead of at the top of the page. Can anyone guide me on how to achieve this? https://i.sstatic.net/RcNhy.png I have already tried using "a ...

cssplotly-dashplotly-python

Getting php variables into html

I have coded the following PHP script: <?php $str = time().'_'.$_FILES["file1"]["name"]; $fileName = $_FILES["file1"]["name"]; $fileTmpLoc = $_FILES["file1"]["tmp_name"]; $fileType = $_FILES["file1"]["type"]; $fileSize = $_FILES["file1"][ ...

phphtmlsession-variables

Remove the border of the icon within the input field in Bootstrap

Currently, I am working on integrating Bootstrap with React and faced a challenge while trying to add a password field with an icon that allows users to toggle between displaying text and hiding it inside the input field. While I have successfully implemen ...

javascriptreactjsbootstrap-5