CODEWITHSUNDEEP
csstwitter-bootstrap-3
izengod
izengod

Reputation: 1156

bootstrap css: can i have reference from CDN and folder path both in a same page?

I have reference of bootstrap files in my HTML from 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 also have my own custom css file reference in HTML from folder path:

<link rel="stylesheet" href="css/mystyles.css">

But it seems like the style rules from my custom css file not working. Is this illegal way of giving reference ? What should be the proper way ?

Here is my 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;
}

Upvotes: 0

Views: 369

Answers (1)

Jay Star
Jay Star

Reputation: 188

Try this for your 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 this fiddle</a></div>
    <address>Address</address>

    <div class="custom">
            <p>Put me to the right on the browser</p>
    </div>
    <div class="row-footer">Footer Content</div>
    <!--scripts at the 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 for your 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 help you. Copy and paste the code on new file and test it. I hope this will help you.

Upvotes: 1

Related Questions