I am trying to use bootstrap CSS classes with polymer2.0 but it is working
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/moment-js+saeidzebardast+0.7.2/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="moment-js/moment-js.html">
</head>
<link rel="import" href="polymer/polymer-element.html">
<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>
<polymer-header></polymer-header>
<dom-module id="polymer-header">
<template>
<style>
:host {
display: block;
}
</style>
<div class="navbar">
[[result.header.name]]
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<!-- navigation strip with descriptive text -->
</template>
</dom-module>
JS:
/**
* #customElement
* #polymer
*/
class PolymerHeader extends Polymer.Element {
static get is() { return 'polymer-header'; }
static get properties() {
return {};
}
}
window.customElements.define(PolymerHeader.is, PolymerHeader);
Codepen- https://codepen.io/nagasai/pen/BZwjqq
Didnt find much help online and finding results for polymer 1 and the closest i found is https://github.com/Polymer/polymer/issues/3156 but it was posted back in 2015.
I tried different options of link import but didnt help much
It doesn't work because when you make a dom-module, the dom that you create is a shadow-dom, that means outer manipulations and stylings are ineffective to these elements inside the dom.
If you really want to use bootstrap css classes (which I don't recommend, because Polymer already has good custom elements that will help to design your applications), try the following :
make a new html file called bootstrap-classes.html that contains :
<dom-module id="bootstrap-classes">
<template>
<style>
<!-- copy paste all your bootstrap classes that you are interested in -->
</style>
</template>
</dom-module>
now in your dom-module :
<link rel="import" href="bootstrap-classes.html"> <!-- include the style module -->
<dom-module id="polymer-header">
<template>
<style include="bootstrap-classes"> <!-- add the include -->
:host {
display: block;
}
</style>
<!-- now the classes should work -->
<div class="navbar">
[[result.header.name]]
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<!-- navigation strip with descriptive text -->
</template>
<script>
...
</script>
</dom-module>
Related
I have the following test code, but no matter what I do the toggle button always positions itself to the bottom right of the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">TestWebsite</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>
<script src="https://github.com/Cognigy/WebchatWidget/releases/latest/download/webchat.js"></script>
<script>
initWebchat(
"https://endpoint-trial.cognigy.ai/1344d45dff864bfb0627d205f7f8835026ab24d0d27384ffabd4740a9c1023b2"
)
</script>
</li>
</ul>
</div>
</nav>
</body>
</html>
I need it to be positioned in an <li> after <li>Page 3</li>
I am tring to creating the Bootstrap Navbar, I linked the boostrap.css and boostrap.min.css successfully. but when i saw the browser it is not working in php.
<link type="text/css" href="bootstrap/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet">
<link type="text/css" href="bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
are you sure that your css are loaded successfully? Check the console.. you have a relative path, use an absolute path to test if the problem vanish.
Here a fiddle with bootstrap included from cdn and your code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
https://jsfiddle.net/sqmahtxz/
One more thing: you need to include only one css, the complete (for development) of minified version (for production).
I think you miss the head tag, thatswhy this can happen. Put your CSS links inside the head tag.
<head>
<link type="text/css" href="bootstrap/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet">
<link type="text/css" href="bootstrap/bootstrap-4.3.1-dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
</body>
You are probably forgot to link the .js at the script tag? and you have to bind the links-tags in the header-tag.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
And I suggest using this link:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
https://getbootstrap.com/docs/4.3/getting-started/introduction/ would be the introduction for bootstrap.
I tried all way css style to keep the menu items in class nav nav-bar bootstrap staying horizontal on small screen device.
The Bootstrap menu like below:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
When I resize the browser or open on my iPhone mobile, the item menu stack over one another. Even though, I tried to use bootstrap class list-inline of bootstrap, it still does not work.
How can I do to achieve, the above purpose? Thanks.
Just set the display: inline-block to the nav li elements.
Stack Snippet
.navbar-default .navbar-nav>li {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
You should probably use the visible-xs-inline class. This sets the display: inline-block style on mobile devices.
You can add this rule to override the class which defines display: block for the li elements in the navbar as a default:
ul.nav > li {
display: inline-block;
}
ul.nav>li {
display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
You need to specify the the col-xs for small screens. If you want the 4 li objects on the same line they should be 3 columns each.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active col-xs-3">Home</li>
<li class="col-xs-3">Page 1</li>
<li class="col-xs-3">Page 2</li>
<li class="col-xs-3">Page 3</li>
</ul>
</div>
</nav>
<!DOCTYPE html>
<html>
<head>
<title>Dropdown</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Article<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Technology</li>
<li>Technology 2</li>
<li>Technology 3</li>
</ul>
</div>
</body>
</html>
this code is not working properly on my Browser(firefox),the dropdown-list is not apearing when I click the button.. Please help
Please try this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Article
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>Technology 1</li>
<li>Technology 2</li>
<li>Technology 3</li>
</ul>
</div>
When using Bootstrap, always make sure that head section contains:
jquery script
bootstrap javascript
bootstrap css file
This has to be the order, otherwise it won't work.
D Sai Krishna's code (especially first three rows) is how it is supposed to be. I always find it better to use external link to .js and .css files than to use local files. To conclude, in head section paste external links (these one's are current as of this writing):
1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> //This will initialize jQuery and enable it to work properly//
2. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> //This will implement Javascript whenever Bootstrap is being used (if applicable). //
3. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> //This will enable Bootstrap styles to be applied to your HTML//
For reference, visit W3schools.com/bootstrap where you can find how to implement above mentioned lines and where. You will also find current external links of bootstrap .js and .css
Hello my bootstrap nav is not dropping down into different sections like I've seen it in examples on multiple sites. I've tried moving things around but to no avail. I feel like I'm missing something very simple though so any input would be much obliged :D
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/styles/style.css">
<link rel=stylesheet type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>Personal Portfolio</title>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1</li>
<li>Page 1-2</li>
<li>Page 1-3</li>
</ul>
</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
</nav>
<footer>
</footer>
</body>
</html>
AN EXAMPLE :D
https://jsfiddle.net/pajdnLwv/
You missed loading the following JS libraries to make the dropdown menu work:
jQuery library (to get the Bootstrap JS work)
Bootstrap JS (to get the dropdown work)
See a working solution: JSFiddle
Add this to your <head> to get it working:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You just need to include the javascript files in your head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
You can try it here
Updated answer for anyone using Bootstrap 4.
Please note that in Bootstrap 4, dropdown menus depend on the popper.js library as well (the umd version specifically). So to get them to work, you need jquery, popper, and bootstrap loaded, in that order. As of today, that looks like this:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Source: Bootstrap Docs > Introduction > Quick Start