Trying to integrate Bootstrap into my portfolio website, but struggling with styling the hr elements. They keep coming out like this:
https://i.sstatic.net/IApoi.png
They also refuse to center align, always sticking to the left. No idea why this is happening - everything looked fine when I was just using CSS/HTML:
https://i.sstatic.net/Q7Rx2.png
Here's the CSS code from my original project pre-Bootstrap:
hr{
border-color: #1b1b1b;
width: 50px;
border-style: dotted none none;
border-width: 8px;
}
When I tried adding this to my existing CSS file with Bootstrap, it didn't work. So, I attempted this instead:
.hr-styled{
border:none;
border-top: 15px dotted #999;
width: 30%;
border-color: #1b1b1b;
}
Unfortunately, I ended up with what you see in the first image. If I remove #999, there are no dots at all.
Grateful for any help provided!