How to add different CSS to the same HTML tags?

Tags: html,css,twitter-bootstrap-3,padding

Problem :

So I want to have a horizontal rule <hr> with a padding of 50px using CSS. However, I already have custom CSS assigned to the <hr> tag which already has padding-bottom:25px; padding-top:100px; padding-left:50px; padding-right:50px; Which is being used to divide the footer from the main content. So how would I achieve having two different CSS styles for the same element?

P.S. I am using Twitter Bootstrap 3

Solution :

I actually found the answer to what I wanted after all this time.

Basically i did the following:

hr.custom {
margin: 10px;

Then I used:

<hr class="custom">

    CSS Howto..

    How to expire cached pages when only the CSS url changes

    How to re-render a page from a Google Chrome extension?

    How to stick a background behind the navbar?

    How to fill the space of removed
    by left or right positioned

    How do I obtain a floating element's left offset while it is outside the viewport?

    How to rotate and fade background images in and out with javascript/ASP.NET/CSS

    How do I design my CSS with ASP.NET MVC?

    How do I apply an outline to a custom styled HTML selection element's expansion clickable element only?

    How to keep image lumpted with last word in a paragraph

    How to develop Javascript and CSS and use minified versions when releasing?

    CSS transition: how to produce this effect (linking transitions)

    How to convert 2 css files into one swf file in flex 4.11 SDK

    How to output CSS counter from Sass mixin

    How to set shadow on top of a CSS border?

    How to fix a double click on a jQuery slide up/down animation?

    background image of div element can't show in php file

    How do I make a header above my navigation bar?

    How to give footer background color for the whole width of the browser with fixed parent div

    How do I apply CSS to the table generated into another window?

    How do I modify this script to use different colors?

    how to make css tooltip not push elements outline in FF

    How to adjust width of a child element without adjusting the width of the parent in CSS?

    CSS: How to position a div in the center with dynamic width

    How to add an orange background to top of page

    CSS - How to centre a link button

    How to set position of checkbox to middle of td and input type text using css? [duplicate]

    How to translate this Silverlight control into HTML/CSS/JS

    How to write css fallbacks for vh vw

    HTML/CSS: How to make web page stay put when resizing browser window?

    How to make table have same width as container?