So, I was studying the front-end course which was created in 2018 and this guy Brad Hussey was teaching Bootstrap, and when I downloaded the source code and everything to make the website work, the grid system for example was not working.
<!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">
<title>Bootstrap Forms</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<div class="container">
<div class="page-header">
<h1>Bootstrap Forms</h1>
<p class="lead">Let's work with some sexy, pre-styled forms, shall we?</p>
</div><!-- page-header -->
<div class="row">
<div class="col-sm-4">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
You're missing closing div tags. Other than that it seems to work alright.
<!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">
<title>Bootstrap Forms</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<div class="container"> <!--- you never closed --->
<div class="page-header">
<h1>Bootstrap Forms</h1>
<p class="lead">Let's work with some sexy, pre-styled forms, shall we?</p>
</div><!-- page-header -->
<div class="row"> <!--- you never closed --->
<div class="col-sm-4">
</div>
</div> <!--- add </div> here --->
</div> <!--- add div here --->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Related
I'm trying to align three divs in bootstrap flexbox as rows, but they keep being aligned vertically instead of horizontally. I've been very circumspect with the code, so it does not appear to be a syntax error. Why would divs align vertically instead of horizontally if class "d-flex flex-row" is set and their size isn't too large?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/custom.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="d-flex flex-row my-flex-container">
<div class="p-2 my-flex-item">1</div>
<div class="p-2 my-flex-item">2</div>
<div class="p-2 my-flex-item">3</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I am having trouble using multiple code snippets in Atom. I must be missing some syntax as only the last snippet works. (New HTML page) If I swap the order, this means the BootstrapBlock works, but never both? Any ideas welcome.
#BOOTSTRAP BLOCK
".text.html":
"BootstrapBlock":
"prefix": "BootstrapBlock"
"body": '''
<div class="container">
<div class="row">
<div class="col-xs-12">
</div><!-- end col -->
</div><!-- end row -->
</div><!-- end container -->
'''
#NEW HTML DOCUMENT
".text.html":
"start":
"prefix": "start"
"body": '''
<!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, user-scalable=no, maximum-scale = 1.0">
<link rel="shortcut icon" type="image/ico" href="/img/assets-images/favicon.ico">
<title></title>
<!-- FRAMEWORK -->
<link href="_includes/css/bootstrap.min.css" rel="stylesheet">
<link href="_includes/css/master.css" rel="stylesheet">
<!--[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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="_includes/scripts/bootstrap.min.js"></script>
</body>
</html>
'''
The reason why only the last snippet works is because you overwrite they key ".text.html". Both snippets should be children of the first key, i.e. remove the second ".text.html" key.
What I am trying to do here is display my HTML page when I run a XSL style sheet. The HTML with .CSS links is embedded inside my XSL. There is no .XML file in this case. I am trying to output the Bootstrap HTML page when the .XSL style sheet is executed. The HTML seems to working as I would expect the .CSS style sheets are not working.
Here is the .xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dp="http://www.datapower.com/extensions" xmlns:dpconfig="http://www.datapower.com/param/config" extension-element-prefixes="dp" exclude-result-prefixes="dp dpconfig">
<xsl:output method="html"/>
<xsl:template match="/">
<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"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet"/>
<meta name="description" content="Error Page"/>
<meta name="author" content="AXA Datapower Team"/>
<link rel="icon" href="../../favicon.ico"/>
<title>Error Page</title>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[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>
<!-- <nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">AXA Equitable</a>
</div>
</div>
</nav>
-->
<div class="container">
<div class="starter-template">
<!--<img src="images/warning.png" alt="Error" class="img-rounded">
<img src="images/error-7-xxl.png" alt="Error" class="img-rounded">
<img src="images/exclamation.png" alt="Error" class="img-rounded">-->
<img src="warning-xxl.png" alt="Error" class="img-rounded"/>
<h1>An unexpected error has occurred.</h1>
<p class="lead">Please contact your system administrator for assistance.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
</xsl:template>
These are the .CSS style sheets that are not being processed:
<!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet"/>
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet"/>
I am running the .XSL page in IBM DataPower. The HTML displays in the browser but with no .CSS Style. Is this simply because the .CSS is not pointing to the correct location on DataPower or is the problem more complicated?
If anyone can help me out here that would be great. This is a simple error page. nothing fancy.
I did an inline style sheet and it works fine. I must not have been linking the correct path to the .CSS withing Datapower.
I'm am having a hard time making websites responsive so i downloaded the basic template and navigation sample from bootstrap, now i'm wondering how do i edit the navigation bar? Because their are already multiple css folders. I tried creating a new css file and editing through there but I can't seem to make it work. What i'm trying to do specifically is making the text centre in the container/wrapper (I'm not sure what exactly it is called, but each word is in a box and i would like to centre the word in that 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">
<!-- The above 3 meta tags *must* come first in the head; any 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 and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the 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 for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as 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 for taking the time to help, have a good day!
First, make sure your custom CSS file is called after the Bootstrap CSS:
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="navbar.css" rel="stylesheet">
<link rel="stylesheet " href="yourCustom.css" />
Second, add this to your custom css:
.col-md-4 {
text-align:center;
}
Why not use Bootstrap's own structure?
jsFiddle Demo
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</nav>
</div>
Bootstrap: my navbar code does not appear when a copy of the same file is saved in a different folder, even though the code is exactly the same
Bootstrap: I have tried looking for an answer to this question on the net but I cannot find the answer.
Here is my code that works. It is located in file:///C:/Users/Spiridon/Desktop/bootstrap-3.2.0-dist/index-1.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">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the 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>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Navbar does not appear when I run a copy of the same file from another folder. Same code, but from this folder:
file:///C:/Users/Spiridon/Desktop/bootstrap-3.2.0-dist/index/index-1.html
By moving your page to a nested folder you've broken the relative paths to your prerequisites. For example,
<link href="css/bootstrap.min.css" rel="stylesheet">
needs to be
<link href="../css/bootstrap.min.css" rel="stylesheet">
in the second folder.