html - How do I link an external css to overwrite bootstrap css for centering elements? -
i'm having hard time making websites responsive downloaded basic template , navigation sample bootstrap, i'm wondering how edit navigation bar? because multiple css folders. tried creating new css file , editing through there can't seem make work. i'm trying making text centre in container/wrapper (i'm not sure called, each word in box , centre word in box
html:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above 3 meta tags *must* come first in head; other head content must come *after* these tags --> <title>example</title> <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="navbar.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-md-4">work</div> <div class="col-md-4">about</div> <div class="col-md-4">contact</div> </div> </body> </html>
thanks taking time help, have day!
first, make sure custom css file called after bootstrap css:
<link href="css/bootstrap.min.css" rel="stylesheet"> <link href="navbar.css" rel="stylesheet"> <link rel="stylesheet " href="yourcustom.css" />
second, add custom css:
.col-md-4 { text-align:center; }
Comments
Post a Comment