bootstrap css: can i have reference from CDN and folder path both in a same page? -
i have reference of bootstrap files in html cdn:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
i have own custom css file reference in html folder path:
<link rel="stylesheet" href="css/mystyles.css">
but seems style rules custom css file not working. illegal way of giving reference ? should proper way ?
here own css style:
.row-header { margin:0px auto; padding:0px auto; } .row-content { margin:0px auto; padding:50px 0px 50px 0px; border-bottom:1px ridge; min-height:400px; } .row-footer { backgroud-color:#afafaf; margin:0px auto; padding:20px 0px 20px 0px; } .jumbotron { padding:70px 30px 70px 30px; margin:0px auto; backgroud:#7986cb; color:floralwhite; } address { font-size:80%; margin:0px; color:#0f0f0f; }
try html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"> <link rel="stylesheet" href="css/mycustom.css"> <title>test</title> </head> <body> <div calss="row-header">header content</div> <div class="row-content">row content</div> <div class="jumbotron"><p><a class="btn btn-lg btn-primary" href="#fork">fork fiddle</a></div> <address>address</address> <div class="custom"> <p>put me right on browser</p> </div> <div class="row-footer">footer content</div> <!--scripts @ bottom--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--//scripts--> </body> </html>
and css
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .custom { float: right; } .row-header { margin:0px auto; padding:0px auto; } .row-content { margin:0px auto; padding:50px 0px 50px 0px; border-bottom:1px ridge; min-height:400px; } .row-footer { #backgroud-color:#afafaf; background-color: #afafaf; margin:0px auto; padding:20px 0px 20px 0px; } .jumbotron { padding:70px 30px 70px 30px; margin:0px auto; #backgroud:#7986cb; background: #7986cb; color:floralwhite; } address { font-size:80%; margin:0px; color:#0f0f0f; }
this should you. copy , paste code on new file , test it. hope you.
Comments
Post a Comment