The CSS list formatting does not seem to be compatible with Bootstrap 4

For my website, I am working on creating a table using the list method along with CSS. However, I encountered a problem where the table is not displaying correctly when Bootstrap CDN is applied. Removing Bootstrap CDN resolves the issue, but I need to keep Bootstrap for other sections of the website.

View with Bootstrap 4 (BS4) screenshot1

View without Bootstrap 4 screenshot2

.wrapper-usd {
  width: 100%;
  max-width: 1000px;
  margin: 20px auto 100px auto;
  padding: 0;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  position: relative;
}

/* lists */
.row-usd ul {
  margin: 0;
  padding: 0;
}

.row-usd ul li {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  list-style: none;
  display: inline-block;
  width: 20%;
  box-sizing: border-box;
}
@media only screen and (max-width: 767px) and (min-width: 480px) {
  .row-usd ul li {
    font-size: 13px;
  }
}
@media only screen and (max-width: 479px) {
  .row-usd ul li {
    font-size: 13px;
  }
}

.title-usd ul li {
  padding: 15px 13px;
}

.row-usd ul li {
  padding: 5px 10px;
}

/* rows */
.row-usd {
  padding: 20px 0;
  height: 30px;
  font-size: 0;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease-out;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.title-usd {
  padding: 25px 0 5px 0;
  height: 45px;
  font-size: 0;
  background-color: rgba(255, 255, 255, 0.1);
  border-left: 3px solid rgba(255, 255, 255, 0.1);
}
<section class="wrapper-usd">
    <main class="row-usd title-usd">
      <ul>
        <li>Name</li>
        <li>Amount</li>
        <li>Count</li>
        <li>Max</li>
        <li>Time</li>
      </ul>
    </main>
      <article class="row-usd">
        <ul>
          <li>Harikumar jyadev</li>
          <li>$50</li>
          <li>12</li>
          <li>48</li>
          <li>2:00ET</li>
        </ul>
      </article>
      <article class="row-usd">
        <ul>
          <li>Harikumar jyadev</li>
          <li>$50</li>
          <li>12</li>
          <li>48</li>
          <li>2:00ET</li>
        </ul>
      </article>
  </section>

Answer №1

Make sure to include the following in your CSS style sheet:

*, ::after, ::before {
    box-sizing: content-box;
}

Answer №2

Have you attempted to import your own custom CSS file after importing Bootstrap? You can try something like this:

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

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

Displaying a Bootstrap table with a sleek grey horizontal scroll bar during the printing process

When attempting to print a webpage with bootstrap tables, an unexpected horizontal scroll bar appears after pressing command/ctrl + P. It seems to be originating from some space below the table within the blue shed area. The resulting print preview shows ...

Expandable fluid inline svg that dynamically fills the remaining space alongside text within a flex row

How can I ensure that an inline SVG occupies all available space within a row without specifying its height across different screen sizes? The solution involves setting the SVG to have 100% height with a viewBox, allowing it to adjust accordingly while ma ...

Is there a way to deactivate other dropdown options?

To simplify the selection process, I would like to disable the options for "Province", "City", and "Barangay". When the user clicks on the "Region" field, the corresponding "Province" options should be enabled. Then, when a specific province is selected, t ...

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

Unable to make boxes responsive to size changes in CSS when layered over video background

I am struggling to position my boxes on top of a video background in HTML/CSS. Despite my efforts, the boxes only appear at the bottom and do not move with any CSS adjustments I make. Is there something I am missing or doing wrong in my approach? I want to ...

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

How come there is such a large space for clicking between my logo and the navigation bar, and what can be done to eliminate it?

* { box-sizing: border-box; padding: 0; margin: 0; } ul { list-style-type: none; } .nav-links, .logo { text-decoration: none; color: #000; } .logo { max-width: 80%; width: 20%; height: 20%; } .navbar img { width: 10%; height: auto; di ...

View a pink map on Openlayers 2 using an iPhone

I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...

Head over to the registration page if your login attempt is unsuccessful

I am currently working on developing a basic login page. The process involves users signing up on the register page first, and then attempting to log in. If the login credentials match with the database, they are directed to the homepage. However, if the u ...

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

Different Ways to Make Custom Checkboxes Overlap with Labels in CSS

Hello everyone, I am currently diving into the world of CSS and HTML. My goal right now is to create a custom checkbox with a list of options. During my research, I stumbled upon an example on how to create custom checkboxes at this link. However, when imp ...

When the Navbar div is set to Position:fixed, it generates empty space on the page

I'm facing the issue of unwanted white space in the center of the page below the Navigation Bar. Despite numerous attempts to remove it, I haven't been successful. Below is the HTML code snippet: html: <!DOCTYPE html> <html> <h ...

Adjust the angle and trim an image on one side

Can someone assist with making an image appear like this: https://i.sstatic.net/J4DPp.jpg I'm attempting to achieve this look using CSS: https://i.sstatic.net/fuucK.png I've experimented with skewing but the red area persists, regardless of t ...

Mootools tweening color transition denied for child elements when color is explicitly defined in CSS

Check out this link for testing: http://jsfiddle.net/EnJSM/ You might observe that by removing "color: #6CB5FF;", the transition behaves differently - it only works for the second part of the line. I'm interested to see what solution you come up wit ...

Guide to setting up the primary navigation in the WordPress administration panel

I recently started using WordPress and I'm struggling with changing the main menu href category. I've tried looking for the header in the FTP files, but I still can't figure out how to do it. I've read through all of the WordPress help ...

Adaptable positioned picture

I'm trying to figure out how to make a series of positioned images adjust to the window's dimensions. Should the images be relative and the page wrap absolute, or vice versa? I've been experimenting on jsfiddle but can't seem to get it ...

Extract a section of the table

I'm looking to copy an HTML table to the clipboard, but I only want to include the rows and not the header row. Here is the structure of the table: <table style="width:100%" #table> <tr> <th class="border"></th> ...

Angular ui-router redirection without altering the ui-view contents

Here's the code snippet from my app.js: // Setting up states using $stateProvider $stateProvider .state('/', { url: "/", views: { "top": { temp ...

Comparing semi-direct file access with the use of an index.php controller

Hey there, I've been pondering a dilemma and would love some input. Although I've searched extensively, I haven't found a clear answer. Currently, my website is php-based and structured around a global index.php file that handles all reques ...

Is there a way to conceal the scrollbar in the mobile view (on a mobile device or emulator) in a React application without disrupting the scrolling functionality?

I am looking to conceal the scrollbar on mobile devices throughout my app while still allowing users to scroll. I have attempted to hide the scrollbar using CSS properties like scrollbar, scrollbar-thumb, scrollbar-thumb:hover, and scrollbar-track. This ...