CODEWITHSUNDEEP
csstwitter-bootstrapoverriding
Cupex
Cupex

Reputation: 13

I can't style a <hr> while using bootstrap

i cant style my hr tag between h1 and button,if i use a older version of bootstrap that is working,but with 5.0.0 isnt.


    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="container">
      <div class="row">
        <h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
        <hr>
        <button class="btn btn-primary btn-xl">Find out more</button>
      </div>
      </div>     
  </body>
</html>

this is the style sheet

body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  background-size: cover;
}
}
hr{
  border-color: #F05F44;
  border-width: 3px;
  max-width: 65px;

Upvotes: 1

Views: 1637

Answers (2)

user3051780
user3051780

Reputation:

You need to override the bootstrap style. That can be done by using !important on the style.

body,
html {
    background: url(header.jpg) no-repeat center center fixed;
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    width: 100vw;
}

hr {
    border-color: #F05F44 !important;
    height: 3px !important;
    max-width: 65px !important;
}
<link href="//fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="//cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<div class="container">
    <div class="row">
        <h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
        <hr>
        <button class="btn btn-primary btn-xl">Find out more</button>
    </div>
</div>

Upvotes: 2

Alamin
Alamin

Reputation: 2165

do hr.<className> for edit any hr tag

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
         <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">

    <title>Hello, world!</title>
  </head>
<style>
body,
html {
  width: 100%;
  height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: url(header.jpg) no-repeat center center fixed;
  background-size: cover;
}
hr.new1 {
  border-top: 1px solid red;
}

/* Dashed red border */
hr.new2 {
  border-top: 1px dashed red;
}

/* Dotted red border */
hr.new3 {
  border-top: 1px dotted red;
}

</style>
  <body>

      <div class="row">
        <h1><strong>THE BIGGEST STARTUP EVENT OF THE YEAR</strong></h1>
        <hr class="new1">
        <hr class="new2">
        <hr class="new3">
        <button class="btn btn-primary btn-xl">Find out more</button>
      </div>

  </body>
</html>

Upvotes: 0

Related Questions