Bootstrap conflicts with my css. How to do hr with middle text

Asked

Viewed 24 times

-3

I’m trying to use this to make a horizontal line with a word in the middle, but the bootstrap won’t let me use it, it disappears with the line (I took the bootstrap link that is in the head to test if it was the problem and it worked, but I need it for other things on the site) Does anyone know how to solve?

fieldset {
    border-top: 1px solid green;
     border-bottom: none;
     border-left: none;
     border-right: none;
     display: block;
     text-align: center;
 }
 
 fieldset legend {
     padding: 5px 10px;
 }

<fieldset>
    <legend>texto aqui</legend>
</fieldset>

<!DOCTYPE html>

<head>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" />
     <!--Fontes-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Klee+One:wght@600&display=swap" rel="stylesheet">



    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta charset="UTF-8">
    <title>titulo</title>

</head>
<body>
    <header class="head">
        
        <fieldset>
            <legend>TEXTO</legend>
        </fieldset>
        <h1>TEXTO</h1>
    </header>
    <section>
        
        <header><h4>vai um monte de texto aqui</h4>
        </header>
            <p>
                lorem lorem lorem lorem lorem lorem lorem
            </p>
            <article>
                <Header><h4>lorem</h4></Header>
                <p>
                    
                   loremloremloremloremloremloremlorem
                </p>
            </article>

        
    </section>
    <footer>
        
    </footer>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
html css

1 answer

-2

Bootstrap is overwriting your CSS.

A solution for you would be to "reset" the class inserted by Bootstrap using a all: unset and then rebuild the CSS of your element.

Your CSS would look like this:

fieldset {
     border-top: 1px solid green;
     border-bottom: none;
     border-left: none;
     border-right: none;
     display: block;
     text-align: center;
 }
 
 fieldset legend {
     all: unset; /* aqui você remove os estilos herdados */
     /* aqui apenas os estilos que você quer */
     padding: 5px 10px;
 }

You can read more about the property all in a post right here on Stack: All property in CSS. What it’s for and how it works?

I hope I’ve helped.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.