Tips for resolving CSS div overlay issues

What is the solution to the div overlay issue? I have a div with two classes: col-sm-6. However, when I check the responsiveness, it overlaps the div. I'm unsure how to fix this. Can someone please assist me?

I have attached an image of the output for reference :)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
  <div class="row">
    <div class="col-sm-6">
      <p><strong>Showing 1 to 6 of 6 entries</strong></p>
    </div>

    <div class="col-sm-6" style="top: -8px;">
      <div class="pagination">
        <button class="btn btn-link previous">Previous</button>
        <button class="btn btn-info number">1</button>
        <button class="btn btn-link next">Next</button>
      </div>
    </div>
  </div>
</div>

https://i.sstatic.net/KrKgj.png

htmlcssbootstrap-4responsive-design

Answer №1

It appears that the mobile grid class (col-xs-12) is missing. Please see the snippet below for a solution:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="block">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <p><strong>Showing 1 to 6 of 6 entries</strong></p>
            </div>

            <div class="col-xs-12 col-sm-6">
                <div class="pagination">
                    <button class="btn btn-link previous">Previous</button>
                    <button class="btn btn-info number">1</button>
                    <button class="btn btn-link next">Next</button>
                </div>
            </div>
        </div>
    </div>

Answer №2

For optimal display on mobile devices using Bootstrap 4, it is recommended to set the div class as "col-12". The "col-sm-6" class may not work effectively for screen sizes less than 557px. Additionally, ensure that your div elements are floated to the right.

.float-right{
  float:right !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="block">
  <div class="row">
    <div class="col-sm-6 col-12 float-right">
      <p><strong>Showing 1 to 6 of 6 entries</strong></p>
    </div>

    <div class="col-sm-6 col-12 float-right" style="top: -8px;">
      <div class="pagination">
        <button class="btn btn-link previous">Previous</button>
        <button class="btn btn-info number">1</button>
        <button class="btn btn-link next">Next</button>
      </div>
    </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

Tips on getting rid of the excess margin added by Android WebView printing

We have been attempting to print content from a webview via Google Cloud Print, but no matter what steps we take, the resulting printout always includes an unwanted margin. Is there a solution to eliminate this margin? We have tried: <body style="marg ...

androidhtmlwebviewandroid-webviewgoogle-cloud-print

Is there a way to arrange three of these cards side by side using CSS to alter their layout?

Hey everyone, I currently have a page that looks like this: Check out the current page I'm looking to change it so that instead of one image per row, there are three images per row (and reduce their size to fit three in a row). Here is my current c ...

htmlcssbootstrap-5

execute the function of the recently added button

There is a button with the id "openWindow" that opens a window when clicked. <button id="openWindow">Open Window on Click</button> A jQuery code changes the button id to "closeWindow" and sends an alert message saying "Open." $( "#openWindow ...

jqueryhtml

Mapping corners with Google Maps

The mask assigned to webkit-mask-image will remain stationary even when scrolling the page. View jsFiddle Sample body{ height:1500px; } #wrapper { margin-top:250px; width: 300px; height: 300px; border-radius: 100px; overflow: hi ...

cssgoogle-maps-api-3

What is the best way to create a hyperlink to the same page but on a separate website?

Currently, I am working on a test version of my website. I would like to add a link in the header of the test server that will direct users to the same page on the live server. Is there any way in HTML or PHP to determine what the current page is? ...

phphtmlurl-routing

Enhance your Material UI Button with Advanced Text Alignment Options for Compact Screens

As a beginner in React and Material-UI, I'm attempting to customize a set of buttons within my app bar with background images for a cleaner look. Drawing inspiration from various online examples, I've managed to style them to my liking on larger ...

cssreactjsmaterial-uinext.js

Retrieve every HTML element that is currently visible on the screen as a result

I have a dynamic HTML table that updates frequently, with the potential for over 1000 rows. Instead of replacing the entire table each time it updates, I am exploring options to only update the visible rows. My initial approach involved iterating through ...

javascripthtmldom

Is the value reset when the page is refreshed?

I am currently working on integrating a login form using angularjs, and I have set up a bootstrap alert to appear when the login is successful or unsuccessful. However, I am facing an issue where the pop-up remains visible even after refreshing the page. ...

javascripthtmlangularjs

Prevent the repositioning of a tooltip due to overflow in Bootstrap 5.2 and Popper JS Tooltips

Can someone please provide an example of how to create a tooltip using Bootstrap 5.x and Popper JS, where the tooltip remains fixed to the associated element even if the page overflows and scroll bars appear? I've attempted to work with boundaries an ...

htmltooltipbootstrap-5popper.js

The pictures are not appearing on my local website

After completing the following steps: Node.js was successfully installed In the command prompt, I entered: npm install http-server -g Navigated to my website files located in cd user/me/local In Google Chrome, I typed: localhost:8080 Upon opening my HTML ...

htmlcsslocalhost

Changing the position of a sprite using jQuery

Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...

jquerycssattributessprite

Issue with OpenWeathermap country codes: "city was not located"

I've been working on coding a weather journal app and I'm encountering an issue. When using the fetch method with the URL of openweathermap.com, passing the zip code and country code, it seems to only accept the US as the country code. Despite tr ...

javascripthtmlcssnode.jsserver

HTML parsing with HTMLAgilityPack can sometimes be tricky, as the SelectNodes

I've heard great things about the HTMLAgilityPack library and decided to give it a shot, but I have been struggling to make it work for months now. No matter what I do, all my attempts seem to result in null. Following tutorials like this one () doesn ...

c#html.nethtml-agility-pack

JavaScript code that triggers a function when the mouse is moved over a description box on a

As a beginner in the field of Computer Science, I recently embarked on a project to create a website for sharing science articles with students. The goal is to spark curiosity and interest in science through this platform. One key feature I wanted to inclu ...

javascripthtmlwebonmouseoveronmouseout

Showing a temporary marker while utilizing jQuery UI sortable container

Incorporating a sortable list of items using jQuery UI in a bootstrap layout has been successfully declared. $("#ReportContainer").sortable({ helper: 'clone', revert: 'invalid', }); Each draggable item represents a column size ra ...

javascriptjqueryhtmltwitter-bootstrapjquery-ui-sortable

"Implementing jQuery toggle and addClass functions in your

How do I modify the class within the same action as a toggle effect, which works independently very well? (I have multiple blocks with the same classes) $(".w_content").hide(); $(".w_target").click(function() { $(this).parent().next('.w_content&apos ...

jqueryhtmlcss

Optimal method for aligning decimal point of price within a django template

I need to show the total amount of money a user has spent in a table. I would like the display of the amount to be clean, but it currently looks like this: https://i.sstatic.net/kOpQ3.png I want the decimal point to line up perfectly on the black s ...

htmldjangodjango-templates

Looking to eliminate the extra space around elements inside the Body section

I'm diving back into HTML5 after years of coding in the old ways. Starting from scratch, I began working on a website design and code. However, I've hit a roadblock with the padding around my images that I can't seem to remove. I want all th ...

htmlcssimagestylespadding

How can you animate a CSS fill effect from the border outward?

I've been struggling to find an answer to this seemingly simple question online. Can anyone explain how to animate a fill-in with a specific color of an element, starting at the border? For example, the border expands gradually until the entire shap ...

htmlcsswebcss-animations

Tips for aligning an image list marker for perfect vertical text centering

When using the CSS property list-style-image, how can I align the 'A' words in the image to the center of the check marks? ...

htmlcsshtml-lists