React Native: unexpected <ul> or <li> displayed

Question

I am using a code from a template React. I am adding a Privacy page.

My problem is that when I add <ul> + <li> for the bullet list:

• it doesn't show the bullet
• doesn't add margin left
• changes the font size and color

Clearly, it must come from global css style but I am not familiar with React nor bootstrap. I can see files like styles.css, bootstrap.css, etc. The bootstrap.css is massive and I can see these lines:

ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}
.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}
dl {
  margin-top: 0;
  margin-bottom: 20px;
}
dt,
dd {
  line-height: 1.42857143;
}
dt {
  font-weight: bold;
}
dd {
  margin-left: 0;
}

which I don't know how to read.

My final goal is to have the bullet list with the bullets and margin and same font, but also understanding what's ruling the final rendering on the web.

Rendered style:

Full code:

import React from 'react';
import PageTitle from '../components/pagetitle/PageTitle';


const Privacy = (props) => {
    const liStyle = {
        marginLeft: 35,
        listStyleType: 'disc', // Setting list style type to 'disc' to show bullet points
    };

    return (
        <div>
            <PageTitle sub='Resources' title='Privacy Policy' />

            <section className="tf-blog-detail">
                <div className="tf-container">
                    <div className="row justify-content-center">
                        <div className="col-md-10">
                            <div className="detail-inner">
                                <div style={{ marginBottom: 100 }} className="content-top">
                                    <h4 style={{ marginBottom: 15 }} className="title">Privacy Policy</h4>
                                    <span>Updated: February 06th, 2024</span>
                                </div>
                                <div className="content-inner">
                                    <h5 style={{ marginTop: '30px', marginBottom: '10px' }}>3. Use of Information</h5>
                                    <p>Generally, we may use the information we collect to provide you with the best possible product and service, and continually improve them. Specifically, we may use your personal information as described in this Privacy Policy to ensure our services work properly, and for other research and commercial purposes. These purposes include, among other things, to:</p>
                                    <ul>
                                        <li>to provide, maintain, personalize, and improve our services and create a better experience for users in our application and with our services;</li>
                                        <li>to create user accounts and/or profiles through registration and import user contacts;</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>
    );
}

export default Privacy;

Answer 1

Bootstrap won't remove any list bullet points by default. If you are using tailwind preflight (by @tailwind base), by default the lists are unstyled:

Ordered and unordered lists are unstyled by default, with no bullets/numbers and no margin or padding.

As suggested in tailwind's document adding-base-styles, one easiest solution is to use @layer to overwrite preflight styles in the CSS file where you've included the Tailwind preflights:

@tailwind base;
@tailwind components;
@tailwind utilities;

/*overwrite tailwind preflight styles for ul, ol*/
@layer base {
    ul, ol {
      list-style: revert;
      margin: revert;
      padding: revert;
    }
  }

You could use list-disc instead if you only want a local change.