So in this navbar i've 2 dropdowns. One is when you are looking at the site on mobile the other is a dropdown. but these don't work. I've looked 2 hours for a solution but nothing yet...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="scripts/jquery.js"></script>
<script src="scripts\bootstrap.js"></script>
<link href="css\bootstrap.css" rel="stylesheet">
<link href="Styles\main.css rel="stylesheet">
</head>
<body>
<!--Aanmaken van een navigatiebar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
Van Beeck Telecom
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Webshop</li>
<li class="dropdown">
Contact
<ul class="dropdown-menu">
<li>Openingsuren</li>
<li>Route</li>
<li>Contactforumlier</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passage
</div>
</body>
</html>
make sure that you load the bootstrap.min.js...
add a line of code like this in the templates footer
<script src="js/bootstrap.min.js"></script>
make sure that the bootstrap.min.js file is in the js folder.
UPDATE
your code should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index</title>
<script src="scripts/jquery.js"></script>
<script src="scripts/bootstrap.js"></script>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="Styles/main.css rel="stylesheet">
</head>
<body>
<!--Aanmaken van een navigatiebar -->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
Van Beeck Telecom
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Webshop</li>
<li class="dropdown">
Contact
<ul class="dropdown-menu">
<li>Openingsuren</li>
<li>Route</li>
<li>Contactforumlier</li>
<li>Facebook</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div>
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passage
</div>
</body>
</html>
<script src="scripts\bootstrap.js"></script>
in your code you have wrong sign, type it like bottom here:
<script src="scripts/bootstrap.js"></script>
Your code is correct (and it works in my computer) so I assume the problem is within the javascript files. To test if this is the case, replace the script and link tags with the following:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
Then, one by one, change the external CDN to your local file, discovering when the problem occurs.
Alternatively, in Google Chrome, you can right-click anywhere in the page and select Inspect. Then in the Developer Tools, select the tab Console. Check if it shows something like this:
Failed to load resource: net::ERR_FILE_NOT_FOUND
This indicates the script file is not being loaded.
Lastly, you might have the javascript execution disabled in your browser. You can find this in the settings.
Related
I'm now on the point i want to open my window and dump my pc. I used the footer template from the tutorial of bootstrap.
It looks fine, but when my text is longer than one page, my footer stays on that location and goed not under the text like it shoud be.
I just want that when my page is longer, my footer stays on the end of the page. Not all my pages are gonne be this small. So please send some help :)
how it seems to work
how its not working
.dropdown-toggle::after {
display: none;
}
.text-decoration-none {
text-decoration: none!important;
}
/* Font Awesome Icons have variable width. Added fixed width to fix that.*/
.icon-width {
width: 2rem;
}
nav .active a {
color: black;
font-weight: 600;
}
nav {
font-weight: bree, sans-serif;
}
.bg-world {
background-image: url('../img/bg-1.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
height: 90vh;
}
.padding {
padding: 10rem;
}
.box-land {
background: rgb(245, 245, 245);
background: linear-gradient(143deg, rgba(245, 245, 245, 0.8547794117647058) 49%, rgba(203, 186, 186, 1) 100%);
border-radius: 20px;
border: 3px solid black;
padding: 1rem;
}
.box-land h2 {
margin-bottom: 2rem;
}
.box-land img {
width: 100%;
margin-bottom: 1rem
}
.footer {
height: 3rem;
}
#media screen and (max-width: 1000px) {
.footer {
display: none !important;
}
}
.footer img {
height: 2rem;
width: auto;
margin-left: 100%;
margin-right: 0;
}
.footer .copyright {
margin-top: 0.25rem;
margin-left: 1rem;
}
.bg-strech {
height: 90vh;
}
.bd-placeholder-img {
background-image: url("../img/bg-1.png");
}
.card-img-info {
width: 100%;
height: 100%;
object-fit: cover;
}
<!doctype htms>
<htms lang="en">
<head>
<meta charset="UTF-8">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/f47aba7ed6.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="assets/css-js/style-main.css">
<title>Document</title>
</head>
<body class="d-flex flex-column min-vh-100">
<header class="d-flex justify-content-center py-3">
<nav class="navbar navbar-expand-lg navbar-light shadow-sm bg-light fixed-top">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="#">
<img src="assets/img/Logo_COW_Balk.png" alt="logo" width="100">
</a>
<button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbar4">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar4">
<ul class="navbar-nav me-auto pl-lg-4">
<li class="nav-item px-lg-2">
<a class="nav-link" href="index.html"> <span class="d-inline-block d-lg-none icon-width"><i class="fas fa-home"></i></span>Home</a>
</li>
<li class="nav-item px-lg-2 active"><a class="nav-link" href="info.html"><span
class="d-inline-block d-lg-none icon-width"><i class="fas fa-spa"></i></span>Info</a>
</li>
<li class="nav-item px-lg-2"><a class="nav-link" href="#"><span
class="d-inline-block d-lg-none icon-width"><i class="far fa-user"></i></i></span>Legende</a>
</li>
<li class="nav-item px-lg-2 dropdown d-menu">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span
class="d-inline-block d-lg-none icon-width"><i class="far fa-caret-square-down"></i></span>Dropdown
<svg id="arrow" xmsns="http://www.w3.org/2000/svg" width="14" height="14"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</a>
<div class="dropdown-menu shadow-sm sm-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item px-lg-2"><a class="nav-link" href="#"><span
class="d-inline-block d-lg-none icon-width"><i class="far fa-envelope"></i></span>Contact</a>
</li>
</ul>
<ul class="navbar-nav ms-auto mt-3 mt-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-twitter"></i><span class="d-lg-none ms-3">Twitter</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-facebook"></i><span class="d-lg-none ms-3">Facebook</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-instagram"></i><span class="d-lg-none ms-3">Instagram</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fab fa-linkedin"></i><span class="d-lg-none ms-3">Linkedin</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="flex-fill">
<div class="text-center text-blue bg-strech">
<div class="container py-5 align-items-center">
<div class="row justify-content-center h-90 flex-grow-1">
<div class="card p-3 mb-4">
<figure class="p-3 mb-0">
<blockquote class="blockquote">
<p>Dit idee is ontstaan omdat ik interesse begon te krijgen in staatkunde en de administratieve onderverdeling van België. Ik zocht een kaart waar alle gemeenten opstonden met hun subdivisies, maar ik vond geen makkelijk toegankelijke kaart,
daarom ben ik op pad gegaan om zo'n kaart te maken met mijn kennis van grafisch ontwerpen en coderen. Het nut van de website is dat alle geïnteresseerden op één plaats terecht komen waar alles te vinden is. Dit is zowel voor oud als
jong. Zo kunnen mensen ook meer bewust worden van hun omgeving en land.</p>
<p>Ik kan dit natuurlijk niet alleen daarom zoek ik contact op met elke gemeente in België om info te vragen over hun gemeenten zoals: wat is de onderverdeling, waar liggen de grenzen, etc... Van veel gemeenten heb ik feedback gekregen
en dit helpt het proces te versnellen om het project af te werken. Ik doe dit alleen en op eigen initiatief daarom ben ik dankbaar voor alle mensen de mij willen sponseren en steunen in dit avontuur. Dank aan jullie allemaal.</p>
</blockquote>
<figcaption class="blockquote-footer mb-0 text-muted">
Achilles Gossaert (16) uit Roeselare
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</main>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-1 justify-content-right">
<img src="./assets/img/footer-img.png" alt="Achilles Gossaert" title="Argentum">
</div>
<div class="col-md-4 copyright">
<p class="mb-0">©
<script>
document.write(/\d{4}/.exec(Date())[0])
</script>
COW. · Privacy · Terms</p>
</div>
<div class="col-md-4 copyright text-end">
<p>Design by Online Development</p>
</div>
</div>
</div>
</footer>
<script src="assets/css-js/nav.js"></script>
</body>
</htms>
You need to give bg-strech a min-hieght: 90vh instead of height: 90vh so it grows if the content is so big.
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!
I am using bootstrap 4 on a litte project for school. I created a layout where there's a carousel next to some text. The problem is that my carousel on the right is responsive for every device width except for mobile devices. It's adjusting perfectly on every other device width, but for some reason my carousel is too big for mobile devices.
Every help is appreciated!
Here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<title>deinUrlaub.at</title>
<link rel="icon" href="imgs/icon.png">
<link rel="stylesheet" href="mall.css">
</head>
<body>
<nav class="navbar navbar-expand-md py-4 bg-info navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">
<img src="imgs/logoNAV.png" class="float-right rounded-circle" alt="deinUrlaub.at" width="100">
</a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link h4 active" href="index.html">START</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="TOP-3.html">TOP 3</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="BILDERGALERIE.html">BILDERGALERIE</a>
</li>
<li class="nav-item">
<a class="nav-link h4" href="ÜBER.html">ÜBER</a>
</li>
</ul>
</div>
</nav>
<main class="p-4 justify-content-center">
<a href="index.html" class="btn btn-info btn-lg mb-4" >Zurück</a>
<div class="container-fluid">
<div class="float-right">
<div class="container ml-2 my-2">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="rounded" src="imgs/mallorcaBild1.jpg" alt="Los Angeles" width="800">
</div>
<div class="carousel-item">
<img class="rounded" src="imgs/mallorcabild2.jpg" alt="Chicago" width="800">
</div>
<div class="carousel-item">
<img class="rounded" src="imgs/mallorcabild3.jpg" alt="New York" width="800">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<h1>Mallorca</h1>
<h2 class="text-secondary">Mallorca bietet wunderschöne Strände mit einem traumhaften türkisen Meer.
</h2>
<br>
<p>Nicht ohne Grund ist Mallorca die beliebteste Baleareninsel, denn sie hält jede Menge für ihre
Besucher bereit. Egal wie man den Urlaub gestalten möchte, es gibt für jeden Geschmack etwas.
</p>
<br>
<p>
Strandliebhaber und Sonnenanbeter finden Ihr Glück an langen Stränden oder kleinen Buchten, umspült
von kristallklarem, azurblauem Wasser und gesäumt meistens mit feinem, weißen Sand. Das Mittelmeer
bietet aber noch viel mehr – für Wassersportler gibt es Angebote für zum Tauchen und Schnorcheln,
Segeln, sowie Kayakfahren und viel mehr.
</p>
<br>
<p>
An Land findet sich ebenso viel zu entdecken, etwa für Wanderer oder Radfahrer. Die einzigartige
Gebirgslandschaft der Serra de Tramuntana mit ihren pittoresken Bergdörfern laden zu Touren oder
Ausflügen im Mietwagen ein.
Wer auf Mallorca Urlaub machen will, wählt aus einer Vielzahl an Unterkünften aus, neben attraktiven
Hotels mit Poollandschaften, gibt es zudem ländliche Hotels, Apartments, sowie Ferienhäuser oder
Fincas.</p>
<div class="text-right">
<a href="#" class="btn btn-info btn-sm mr-5 mt-4" >Jetzt Buchen</a>
</div>
</div>
</main>
<footer class="container-fluid p-5 bg-info text-white text-left">
<div class="row">
<div class="column col-md-11">
<p>TEL: 0680 3336549</p>
<p>EMAIL: support.deinUrlaub#gmail.com</p>
</div>
<div class="column">
<br>
<p>© deinUrlaub.at</p>
</div>
</div>
</div>
</footer>
</body>
</html>
And here's my css:
h1 {
font-size: 65px;
}
p {
font-size: 23px;
}
.btn-sm {
padding-left: 20px;
padding-right: 20px;
font-size: 40px;
border-radius: 10px;
}
.container {
width: 50pc;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
Okay, I just fixed it by not writing a specific width in .container, but giving it a min-width aswell as a max-width (which would be my specific width). Thanks for helping everyone!
I was working on a landing page when I try to shrink my page everything works fine beside the header file the text goes off the screen. I wonder if somebody can inlight on this problem.
I haven't use any js code yet.
.stage {
background: url(img/Header/living-room-1517166_1920.jpg) center center no-repeat;
background-size: cover;
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!--Nav bar-->
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top navbar-fixed-top">
<a class="navbar-brand" href="#">Wijkveiligheid</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Thuis <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Promo video</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Vergelijk</a>
</li>
<li class="nav-item">
<a class="btn btn_primary" href="#">Login</a>
</li>
</ul>
</div>
</nav>
<div class="stage" id="stage">
<div id="stage-caption">
<h1 class="display-3">Uw veiligheid is onze prioriteit</h1>
<p class="HeaderP">Wij van wijkveiligheid kijken altijd hoe we het woongenot van onze medemens kunnen verbeteren en optimaliseren. Onze professionele adviseurs staan klaar om samen met u te kijken hoe uw huis ook optimaal beveiligd kan worden en klaar is voor de toekomst.</p>
</div>
</div>
I fix the problem by adding max width of 500px and then change font-size to 0.9rem.
#media screen and (max-width : 500px) {
.HeaderP{
display: flex;
align-items: center;
font-size: 0.9rem;
}
}
Im using Twitter Bootstrap 3 for my HTML site, but the navigation is always collapsed. It looks very bad when i open it in my normal browser, on my mobile-phone it looks good. How can not make the navigation bar collapsing by default?
<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.-->
<a class="navbar-brand" href="#"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->
<li class="">
Hoofdmenu
Mijn Beschikbaarheid
Openstaande Zorgvragen
Mijn inschrijvingen
Mijn Care Assists
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
In the following link is my code;
http://pastebin.com/hApriu50
You have put all of your links under single li which is wrong. Try following code.
Demo Fiddle
<div class="navbar navbar-inverse navbar-fixtop" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Hierin wordt het logo van de site weergeven, de tekst is te vervangen door een plaatje als dat gewenst is.--> <a class="navbar-brand" href="#">Standby Thuiszorg</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Hierin worden de menu items opgehaald die je hierboven benoemt hebt, ook wordt er active toegevoegt aan het geselecteerde linkje.-->
<li class="">Hoofdmenu
</li>
<li>Mijn Beschikbaarheid
</li>
<li>Openstaande Zorgvragen
</li>
<li>Mijn inschrijvingen
</li>
<li>Mijn Care Assists
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
The navbar-nav markup is incorrect. It should look like..
<ul class="nav navbar-nav">
<li class="">Hoofdmenu</li>
<li>Mijn Beschikbaarheid</li>
<li>Openstaande Zorgvragen</li>
<li>Mijn inschrijvingen</li>
<li>Mijn Care Assists</li>
</ul>
Bootply