I'm a newbie in all this, and don't even know how to refer to some terms correctly, sorry if I'm not very good at explaining myself. I'm trying to find a way to extract the country code, in my case "códigoIso", from the HTML I managed to obtain on OpenRefine. We've been asked to EXTRACT, but not told how to do it, not even a hint on what languge to use, or how GREL works. In fact, we haven't been explained how to do any of it.
I've searched everywhere but can't find the correct "expression", so I can parse this, and get the only information I need: the ISO value of the country code, 32.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:dbpprop="http://dbpedia.org/property/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
version="XHTML+RDFa 1.0"
xml:lang="es"
>
<!-- header -->
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About: Argentina</title>
<link rel="alternate" type="application/rdf+xml" href="http://es.dbpedia.org/data/Argentina.rdf" title="Structured Descriptor Document (RDF/XML format)" />
<link rel="alternate" type="text/n3" href="http://es.dbpedia.org/data/Argentina.n3" title="Structured Descriptor Document (N3 format)" />
<link rel="alternate" type="text/turtle" href="http://es.dbpedia.org/data/Argentina.ttl" title="Structured Descriptor Document (Turtle format)" />
<link rel="alternate" type="application/json+rdf" href="http://es.dbpedia.org/data/Argentina.jrdf" title="Structured Descriptor Document (RDF/JSON format)" />
<link rel="alternate" type="application/json" href="http://es.dbpedia.org/data/Argentina.json" title="Structured Descriptor Document (RDF/JSON format)" />
<link rel="alternate" type="application/atom+xml" href="http://es.dbpedia.org/data/Argentina.atom" title="OData (Atom+Feed format)" />
<link rel="alternate" type="text/plain" href="http://es.dbpedia.org/data/Argentina.ntriples" title="Structured Descriptor Document (N-Triples format)" />
<link rel="alternate" type="text/csv" href="http://es.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fes.dbpedia.org&query=DESCRIBE%20%3Chttp%3A%2F%2Fes.dbpedia.org%2Fresource%2FArgentina%3E&format=text%2Fcsv" title="Structured Descriptor Document (CSV format)" />
<link rel="alternate" type="application/microdata+json" href="http://es.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fes.dbpedia.org&query=DESCRIBE%20%3Chttp%3A%2F%2Fes.dbpedia.org%2Fresource%2FArgentina%3E&format=application%2Fmicrodata%2Bjson" title="Structured Descriptor Document (Microdata/JSON format)" />
<link rel="alternate" type="text/html" href="http://es.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fes.dbpedia.org&query=DESCRIBE%20%3Chttp%3A%2F%2Fes.dbpedia.org%2Fresource%2FArgentina%3E&format=text%2Fhtml" title="Structured Descriptor Document (Microdata/HTML format)" />
<link rel="alternate" type="application/ld+json" href="http://es.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fes.dbpedia.org&query=DESCRIBE%20%3Chttp%3A%2F%2Fes.dbpedia.org%2Fresource%2FArgentina%3E&format=application%2Fjson-ld" title="Structured Descriptor Document (JSON-LD format)" />
<link rel="alternate" type="text/x-html-script-ld+json" href="http://es.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fes.dbpedia.org&query=DESCRIBE%20%3Chttp%3A%2F%2Fes.dbpedia.org%2Fresource%2FArgentina%3E&format=text%2Fx-html-script-ld%2Bjson" title="Structured Descriptor Document (HTML with embedded JSON-LD)" />
<link rel="alternate" type="text/x-html-script-turtle" href="http://es.dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fes.dbpedia.org&query=DESCRIBE%20%3Chttp%3A%2F%2Fes.dbpedia.org%2Fresource%2FArgentina%3E&format=text%2Fx-html-script-turtle" title="Structured Descriptor Document (HTML with embedded Turtle)" />
<link rel="timegate" type="text/html" href="http://dbpedia.mementodepot.org/timegate/http://es.dbpedia.org/page/Argentina" title="Time Machine" />
<link rel="foaf:primarytopic" href="http://es.dbpedia.org/resource/Argentina"/>
<link rev="describedby" href="http://es.dbpedia.org/resource/Argentina"/>
<link rel="stylesheet" type="text/css" href="/statics/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/statics/css/dbpedia.css" />
</head>
<body about="http://es.dbpedia.org/resource/Argentina">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#dbp-navbar" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://es.dbpedia.org" title="About DBpedia" style="color: #2c5078">
<img class="img-responsive" src="https://i.imgur.com/IeeSN7U.png" alt="About DBpedia" style="display: inline-block; margin-top: -15px;width:70px;height:49px;"/>
</a>
<a class="navbar-brand" href="https://www.upm.es/" title="About UPM" style="color: #2c5078">
<img class="img-responsive" src="https://www.upm.es/sfs/Rectorado/Gabinete%20del%20Rector/Logos/UPM/Logotipo%20con%20Leyenda/LOGOTIPO%20leyenda%20color%20PNG.png" alt="About UPM" style="display: inline-block; margin-top: -20px;width:120px;height:56px;">
</a>
</div>
<div class="collapse navbar-collapse" id="dbp-navbar">
<ul class="nav navbar-nav navbar-right">
<li><a class="active" href="/fct/" title="Switch to /fct endpoint"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Faceted Browser </a></li>
<li><a class="active" href="/sparql/" title="Switch to /sparql endpoint"><span class="glyphicon glyphicon-new-window" aria-hidden="true"></span> Sparql Endpoint </a></li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> Browse using <span class="caret"></span>
<ul class="dropdown-menu">
<li>OpenLink Faceted Browser</li>
<li>OpenLink Structured Data Editor</li>
<li>LodLive Browser</li>
<li>LODmilla Browser</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-file" aria-hidden="true"></span> Formats <span class="caret"></span>
<ul class="dropdown-menu">
<li> RDF:</li>
<li>N-Triples</li>
<li>N3</li>
<li>Turtle</li>
<li>JSON</li>
<li>XML</li>
<li class="divider"></li>
<li> OData:</li>
<li>Atom</li>
<li>JSON</li>
<li class="divider"></li>
<li> Microdata:</li>
<li>JSON</li>
<li>HTML</li>
<li class="divider"></li>
<li> Embedded:</li>
<li>JSON</li>
<li>Turtle</li>
<li class="divider"></li>
<li>CSV</li>
<li>JSON-LD</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- page-header -->
<div class="page-header">
<!-- div class="pull-right">
<a href="http://es.dbpedia.org" title="About DBpedia">
<img class="img-responsive" src="/statics/images/dbpedia_logo_land_120.png" alt="About DBpedia"/>
</a>
</div -->
<h1 id="title">About:
Argentina
</h1>
<div class="page-resource-uri">
An Entity of Type : Location,
from Named Graph : http://es.dbpedia.org,
within Data Space : es.dbpedia.org
</div>
</div>
<!-- page-header -->
<!-- row -->
<div class="row">
<div class="col-xs-12">
<p class="lead">Argentina, oficialmente República Argentina, es un país soberano de América del Sur, ubicado en el extremo sur y sudeste de dicho subcontinente. Adopta la forma de gobierno republicana, democrática, representativa y federal. Integra el Mercosur —bloque del que fue fundador en 1991—, la Unión de Naciones Sudamericanas (Unasur), la Comunidad de Estados Latinoamericanos y Caribeños (CELAC) y la Organización de Estados Americanos (OEA).</p>
</div>
<div class="col-xs-12">
<!-- proptable -->
<table class="description table table-striped">
<tr>
<th class="col-xs-3">Property</th>
<th class="col-xs-9">Value</th>
</tr>
<tr class="odd"><td class="property"><a class="uri" href="http://es.dbpedia.org/ontology/abstract" title="http://dbpedia.org/ontology/abstract"><small>dbo:</small>abstract</a>
</td><td><ul>
There's a long section after, with more information about the Country, but this is the part where the ISO code is.
<li>
<span class="literal">
<span property="prop-es:códigoIso" xmlns:prop-es="http://es.dbpedia.org/property/">32</span>
<small> (xsd:integer)</small>
</span>
</li>
</ul>
</td>
</tr>
<tr class="even">
<td class="property">
<a class="uri" href="http://es.dbpedia.org/property/códigoTelefónico">
<small>prop-es:</small>códigoTelefónico
</a>
</td>
<td>
<ul>
I have tried everything I could find on the topic, but keep getting errors, and I'm becoming desperate.
Any help will be greatly appreciated.
Ps: Thank you for the corrections I got so far!
Related
I'm trying to make the user profile icon clickable to show the user info (email address) and logout in bootstrap/html. Does anyone know how to do this in bootstrap or html like it is done here in an example using angular materials.
User Profile Icon Screenshot
Here is a codepen and snippet of what I currently
Codepen
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache,no-store" />
<meta http-equiv="expires" content="0" />
<title>AZDOE: Core Demo</title>
<link rel="stylesheet" href="https://design.linq.com/10.4.0/vendors/angular-material-
theme.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/storybook/angular/assets/linq-
snackpaq-core.css">
<link rel="stylesheet" href="https://design.linq.com/10.4.0/theme/blueberry-muffin.css">
<link rel="stylesheet" href="../css/design-system-overrides/stylesheet.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.12.1/css/all.css"
integrity="sha384-TxKWSXbsweFt0o2WqfkfJRRNVaPdzXJ/YLqgStggBVRREXkwU7OKz+xXtqOU4u8+"
crossorigin="anonymous">
<link rel="stylesheet" href="../styles/master_common.css">
<link rel="stylesheet" href="../styles/master_760.css">
<link rel="stylesheet" href="../css/select2.css">
<link rel="stylesheet" href="../css/core2.css">
</head>
<body class="loggedin">
<div class="site-wrapper">
<!-- HEADER -->
<header id="header">
<nav class="navbar navbar-expand-lg mb-2">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#sidebar-
wrapper" aria-controls="sidebar-wrapper" aria-expanded="false" aria-label="Toggle
navigation">
<span class="material-icons">menu
</span>
</button>
<a href='/' class="navbar-brand">
<img id="headerLogo" src="../images/AZ-DOE.svg" class="header-logo" alt="State Logo" />
</a>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select SFA</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="vl"></div>
<div class="nav-container">
<ul class="nav-items">
<!-- Navigation -->
<!-- Dropdown menu -->
<li class="nav-item-select nav-item-dropdown">
<a class="dropdown-trigger" href="#">Select Program Year</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-item">
Dropdown Item 1
</li>
<li class="dropdown-menu-item">
Dropdown Item 2
</li>
<li class="dropdown-menu-item">
Dropdown Item 3
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-collapse collapse" id="Div1">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<i class="fas fa-search"></i>
</li>
<li class="nav-item rounded-icon">
<a href="#" class="nav-link" title="Settings"><i class="fas fa-user"></i><b
class="caret"></b></a>
</li>
</ul>
</div>
</nav>
</header>
<!-- SPONSOR INFO SECTION -->
<main role="main" id="main">
<div id="wrapper">
<!-- SIDEBAR -->
<div id="sidebar-wrapper" class="sb-wrapper collapse">
<i class="fas fa-chevron-circle-left"></i>
<div class="list-wrapper">
<div class="nav-wrapper">
<ul class="sidebar-nav">
<li>
<a href="#" v-b-tooltip.hover.right title="Entity Manager">
<div> Entity Manager</div>
</a>
</li>
.....
</div>
</div>
<!-- CONTENT -->
<div class="container-fluid">
<div class="row">
<div class="col">
<div id="midcol-nslp" class="p-3">
</div>
</div>
</div>
</div>
</div>
<div class="clearfix"></div>
</main>
<footer class="mt-auto fixed-bottom">
<div class="container-fluid py-2">
<div class="row">
<div class="col text-center small">
© 2020 Colyar Technology Solutions, LLC. All rights reserved.
</div>
<div class="text-sm-center text-md-right d-flex justify-content-end align-items-center">
<ul class="nav">
<li class="nav-item">
<a href="mailto:info#colyar.com?subject=Website Test"><i class="fas fa-envelope-
open-text" data-toggle="tooltip" data-placement="top" title="Contact Support"></i></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js">
</script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
<script src="../JS/app.js"></script>
<script>
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
document.getElementById("datetime").innerHTML = formatAMPM();
function formatAMPM() {
var d = new Date(),
minutes = d.getMinutes().toString().length == 1 ? '0'+d.getMinutes() :
d.getMinutes(),
hours = d.getHours().toString().length == 1 ? '0'+d.getHours() : d.getHours(),
ampm = d.getHours() >= 12 ? 'pm' : 'am',
months =
['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
days = ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'];
return days[d.getDay()]+' '+months[d.getMonth()]+' '+d.getDate()+'
'+d.getFullYear()+' '+hours+':'+minutes+ampm;
}
</script>
</body>
</html>
Hopefully this is enough to help with what I'm trying to do.
You would want a single button dropdown, but and put your userinfo and logout inside the div and set the image icon style in the button instead.
https://getbootstrap.com/docs/4.0/components/dropdowns/#single-button-dropdowns
Here is some sample code to get you started with.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="user-icon"></i></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<div class="info-header">Profile</div>
<div class="user-email">richard.belding#bayside-hs.com</div>
<button class="btn btn-primary>Logout</button
</div>
</div>
<!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>David Chu's China Bistro'</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght# S300;400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght#0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<!--here container is used and not container-fluid because there is little info on this homepage thus we don't want the width to stretch to the full width of the screen-->
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div><!--the id #logo-img is responsible to print the logo-->
</a>
<div class="navbar-brand">
<h1>David Chu's China Bistro</h1>
<p>
<img src="images/K-star-logo.jpg" id="K-logo" alt="Kosher certification" />
<span>Kosher certified</span>
</p>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<!--used to display our menu items(use unordered list)-->
<li>
<a href="menu-categories.html">
<span class="glyphicon glyphicon-cutlery"<!--glyphicon is used to import the image of the cutlery and let it behave as a font--></span><br class="hidden-xs" /><!--break tag is used here to remove the Menu word when we reach the breakpoint-->Menu
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hidden-xs" />About
</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span>
<br class="hidden-xs" />Awards
</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span>
</a><div>*We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
My code is responsible for displaying the navbar of a website. When my screen is at full-page i am getting next to the restaurant's name "menu", "awards" and "About".
When the page is squeezed (or website used on a phone), I need the "menu", "awards" and "About" buttons to disappear and display in their place a toggle navigation button that when clicked will display those 3 buttons, which is not happening.
I'm developing my own website using bootstrap and I added a collapse navbar fixed at the top but it does not unfold when I click the hamburger button.
I've read some blogs and do not seem to have the two main problems which are:
- not putting a good data-target
- not putting the jquery call before the bootstrap javascript
I've literary spent the whole day today trying to figure this out. Here is my html, if you find something I would be so relieved.
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" media="screen" type="text/css" href="cvop1.css" />
<link rel="stylesheet" media="screen and (max-width: 767px)" type="text/css" href="petite_version1.css" />
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/js/jquery.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<title> Oncle Joe </title>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Joseph Durand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Formations <span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-header">Cours proposés</li>
<li>Macroéconomie</li>
<li>Histoire de la philosophie politique</li>
<li>Mécanique quantique</li>
<li role="separator" class="divider"></li>
<li>Suggestions et avis</li>
</ul>
</li>
<li class="dropdown">
Orientation<span class="caret"></span>
<ul class="dropdown-menu">
<li class="dropdown-header">Guide des études</li>
<li>Études à l'étranger</li>
<li>Autres témoignages</li>
<li role="separator" class="divider"></li>
<li>Ajoutez vos parcours</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li class="dropdown-header">Découvrez et commmentez !</li>
<li>Musique</li>
<li>Artistes famille</li>
<li role="separator" class="divider"></li>
<li>Partagez-moi vos créations</li>
</ul>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li class="dropdown-header">Un accès public et privé</li>
<li>Ma mif</li>
<li>Ma meuf</li>
<li>Mes gars sûrs</li>
</ul>
</li>
<li> Mini-jeux </li>
<li> <img src="https://scontent-cdt1-1.xx.fbcdn.net/v/t1.0-1/p320x320/15871974_1190156091033303_4585352380125885170_n.jpg?_nc_cat=103&_nc_sid=dbb9e7&_nc_ohc=qn93db1mdrMAX_7cN9y&_nc_ht=scontent-cdt1-1.xx&_nc_tp=6&oh=495fb008b60203147ed553338147388b&oe=5EC9B841" alt="C'est moi!" width="22" height="22"/> </li>
</ul>
</div>
</nav>
```
I've read through others posts the whole evening and just found one that answers mine. I had downloaded a too recent jQuery version (3. something) whereas it only works with jQuery 1 or 2
I got the idea from the first comment to this question:
Navbar collapse is not working in Bootstrap
I'm sorry if I bothered any of you too long with this and hope this will help others:
Check the data-target
Check that jquery is called before the bootstrap javascript
Check that your jquery and bootstrap versions correspond to the commands/functnionalities you want
I'm quite new to CSS and bootstrap here.
I am trying to align a list on the navbar horizontally but I can't figure out what's wrong.
Instead of aligning them side by side, it seems to align one below the other, which is not what I'm looking for.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" contents="IE=edge">
<meta name="viewport" content="width=device-width, initial scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/terms.css">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/>
<title>Terms of Service</title>
</head>
<body>
<!--Header-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="Bet Coins">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">
<b>Terms of Service<b>
</li>
<li>
<b>Legal Guidelines</b>
</li>
<li>
Privacy Policy
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
CSS code:
.navbar{height:95px;}
.body{background-color: #000000;color: #FFFFFF;}
.navbar-nav li a{line-height: 64px;}
Image:
This is a really small thing, but you need to be careful to close all your tags properly; if you close the <b> tags in your <li> then it works. Apart from that your markup is correct. It should look like this:
<li class="active">
<b>Terms of Service</b>
</li>
<li>
<b>Legal Guidelines</b>
</li>
<li>
Privacy Policy
</li>
I also added a closing slash to the <img> tag here:
<img src="images/logo.png" alt="Bet Coins" />
but I think that's less crucial than closing the <b> tags properly.
Demo here:
http://jsfiddle.net/6804py5w/1/
i'm updating my site to bootstrap 3 and i have a problem i have added my navbar and header but when i try to add a jumbotron it appears under the bs-header dono why it does that i check every thing if my div are closed and they are sow if some one can tel me what i'm doing wrong ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="HyperGainZ">
<title> My Mod Pack · MMP </title>
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap-simplex.css" rel="stylesheet">
<link href="assets/css/bootstrap-simplex.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="assets/css/docs-index.css" rel="stylesheet">
<link href="assets/css/pygments-manni.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57.png">
<link rel="shortcut icon" href="../assets/ico/favicon.png">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
MMP
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="active">
Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li><a tabindex="-1" href="#">1</a></li>
<li><a tabindex="-1" href="#">2</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#">3</a></li>
<li><a tabindex="-1" href="#">4</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign Up</li>
<li class="divider"></li>
<li>Sign In</li>
</ul>
</div>
</div>
<div class="bs-header" id="content">
<div class="container">
<br />
<img src="assets/img/index.jpeg" class="img-circle" width="125px" height="125px"alt="Sevadus" align="left">
<h1>MMP</h1>
<p class="lead">My Mod Pack</p></img>
<div id="carbonads-container">
<div class="carbonad">
<div id="azcarbon">
<h4>Site Version : <span class="badge badge-success">Alpha</span></h4>
<h4>Head Of Project : <span class="badge badge-info">HyperGainZ</span></h4>
<h4>acepting Beta's : <span class="badge badge-success">Yes</span></h4>
<h4>Public Launcher : <span class="badge badge-primary">Not Yet</span></h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 jumbotron">
<h1>Pack Assembler</h1>
<p>Managing Mods, Packs, and Servers easily and efficiently.</p>
<p>
Get Started <i class="icon-double-angle-right"></i>
</p>
</div>
</div>
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
</body>
Because you're containing .bs-header within .navbar-fixed-top you'll need to use top padding equal to the static height of your navbar, on the body.
From the bootstrap documentation:
The fixed navbar will overlay your other content, unless you add
padding to the top of the . Tip: By default, the navbar is 50px
high.