My HTML file is working perfectly while I am using its path
file:///C:/xampp/htdocs/resume/dashboard/ads.html to run it, but while I'm running it via localhost
http://localhost/resume/dashboard/ads.html
from the same location, some of its features like:
(modal scrolling and js code) are not working.
Please help!
ads.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" sizes="96x96" href="../img/logo/kk.png">
<link rel="stylesheet" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Ads</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<!-- Paper Dashboard core CSS -->
<link href="assets/css/paper-dashboard.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="assets/css/demo.css" rel="stylesheet" />
<!-- Fonts and icons -->
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Muli:400,300' rel='stylesheet' type='text/css'>
<link href="assets/css/themify-icons.css" rel="stylesheet">
</head>
<body>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-1">
Launch Modal 1
</button>
<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal 1</p>
Next >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- #modal 2 -->
<div class="modal fade" id="modal-2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
< Previous
<p>Modal .Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla..2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
<script></script>
<!-- Core JS Files -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="assets/js/bootstrap-checkbox-radio.js"></script>
<!-- Charts Plugin -->
<script src="assets/js/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
<!-- Paper Dashboard Core javascript and methods for Demo purpose -->
<script src="assets/js/paper-dashboard.js"></script>
<!-- Paper Dashboard DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
</html>
bootstrap.min.css
#modal-2 {
overflow-y:scroll;
}
In this section of code, the second modal is not scrolling.
When web sites work in one form and not another, it is typically due to one of two things:
A path or paths to various resources are fixed and not relative. For example: maybe your HTML looks for a Java Script file in a path called C:/xampp/htdocs/resume/dashboard/javascript/myjs.js instead of a relative path like ./javascript/myjs.js or maybe, you are already using relative paths but the starting directory of the relative path is off.
Usually you would notice this by images not showing or Java Script files not loading.
When you run as localhost, you are in the localhost domain and if you're making requests to other domains maybe they are being stopped for security reasons. You will generally notice these types of errors if you open the developer console in your browser you'd see errors saying that a resource was not allowed to load for security reasons or a cross-domain request was blocked.
If it is ONLY some Java Script not working, then I'd look at what attributes those javascript share... if they share a path take extra care to validate those, or if they require jQuery then you might need to load JQuery from the web instead of loading it locally.
To start your diagnostics, I'd recommend, opening the developer console in your browser (Chrome: right-click on a page and pick "Inspect" and look in the console tab) Take a look at the errors it shows. (usually a yellow triangle or red stop sign followed by a semi-descriptive error) It should tell you what is not loading and why and work backward from there.
If your paths are accurate and you're still stuck, you might look at the DocumentRoot setting in C:\xampp\apache\conf\httpd.conf and make sure that is set to the right starting directory, but check your errors first before altering configs. Changing configs should be a last resort... and if you do change them keep a backup of the original!
The most likely problem is that you are using incorrect paths. When you move from file based to http based the root / folder is your webroot, when using the file:// approach the root folder is the root of the drive the files are hosted on.
Sometimes, just the CSS files get cached, it's a very common problem for new web developers. So, to get rid of it just clear your cache from your web browser or just press cmd+shift+R. If you think that you have written right CSS but it's not visible in your web browser.
Related
By default, bootstrap modals are set to display: block;. How can I change this to display: flex;? I would like to avoid adding JavaScript to fix this if possible.
This code makes it so the modal has display:flex but it is always visible. I am assuming this is because bootstrap by default makes this a display:hidden.
#HelpModal {
display: flex;
justify-content: center;
align-items: center;
}
Here is my modal, $RenderedAdminHelpModal is not causing an issue here. I am using SilverStripe to render the content of this modal.
<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#HelpModal">Tutorial</button>
<div id="HelpModal" class="d-flex p-2 modal" role="dialog">
<div class="modal-dialog">
$RenderedAdminHelpModal
</div>
</div>
The short answer to your question is: "You don't change the display property of a Bootstrap 3 modal".
Looking at your code, I'm guessing the reason why you want to change its display property is because you want to vertically centre it.
Vertically centring a Bootstrap 3 modal is not as easy as it may seem, for at least two reasons:
First and foremost, Bootstrap changes its display property on the fly when showing/hiding it. I wouldn't recommend overriding that property.
Then you have a different, even more delicate problem. Vertically centring a tall child in a short parent, with flex, makes the top and bottom of the child go outside of the parent. And when the parent is the size of the viewport, you end up not being able to scroll to the start of the child.
In short, when the modal holds enough content to become taller than the viewport, you can no longer scroll to its top. And that's a huge accessibility problem.
A decent solution for Bootstrap 3 modals is to limit the height of the modal (making sure it is never taller than the viewport) and place a scrollbar, when needed, on the modal's body.
Here's how:
#media (min-height: 270px) {
.modal-dialog {
height: calc(100vh - 20px);
display: flex;
align-items: center;
}
.modal-content {
width: inherit;
max-height: calc(100vh - 20px);
display: flex;
flex-direction: column;
}
.modal-footer,
.modal-header {
flex-grow: 0;
}
.modal-body {
flex-grow: 1;
overflow-y: auto;
}
#media (min-width: 768px) {
.modal-dialog {
height: calc(100vh - 60px);
}
.modal-content {
max-height: calc(100vh - 60px);
}
}
}
See it working:
#media (min-height: 270px) {
.modal-dialog {
height: calc(100vh - 20px);
display: flex;
align-items: center;
}
.modal-content {
width: inherit;
max-height: calc(100vh - 20px);
display: flex;
flex-direction: column;
}
.modal-footer,
.modal-header {
flex-grow: 0;
}
.modal-body {
flex-grow: 1;
overflow-y: auto;
}
#media (min-width: 768px) {
.modal-dialog {
height: calc(100vh - 60px);
}
.modal-content {
max-height: calc(100vh - 60px);
}
}
}
.modal-title {
padding-right: 1.5rem;
}
.modal-header button.close {
position: absolute;
right: 1.5rem;
top: 1.5rem;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"></script>
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large tall modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large tall modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small tall modal</button>
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Small tall modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
<p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-xs">Small short modal</button>
<div class="modal fade bs-example-modal-xs" tabindex="-1" role="dialog" aria-labelledby="myExtraSmallModalLabel">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Small short modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Test</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Why wrapped in a min-height media query? Because it doesn't render well on viewports with a height below 200px (the .modal-body content becomes hard to access, because of the limited element height).
But we don't really want vertical centring on those screens, do we? The main concern there is accessibility. And Bootstrap 3 provides it out of the box, if we don't interfere.
I have a basic bootstrap 4, flex page which its navigation and footer should be sticky but its not and I cant figure out why:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header>
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
I was on the impression that .sticky-top class would sort out the situation for the top menu but cant figure out exactly what is causing this issue. How can I make sure that in below simple page both top menu bar and footer are sticky?
For the sticky header, you add the class to header instead of nav as below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top ">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
There is no sticky-bottom class but there are some tutorials to set a sticky footer, like this
Another option can be just add position: sticky; bottom: 0 to <footer> tag
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet">
<!-- <link href="css/style.css" rel="stylesheet"> -->
<link href="site.webmanifest" rel="manifest">
<link href="icon.png" rel="apple-touch-icon">
<title>company</title>
<style>
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #007bff;
background: linear-gradient(to right, #0062E6, #33AEFF);
}
#sticky-footer {
position: sticky;
bottom: 0;
}
</style>
</head>
<body class="d-flex flex-column">
<header class="sticky-top">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark bg-dark font-weight-light ">
<div class="container">
<a class="navbar-brand" href="/">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Products</a>
<div class="dropdown-menu">
Product 1
Product 2
</div>
</li>
<li class="nav-item dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown"
id="navbarDropdownMenuLink">Services</a>
<div class="dropdown-menu">
Service 1
Service 2
</div>
</li>
<li class="nav-item">
Contacts
</li>
<li class="nav-item">
Register
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will
have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam, urna a molestie ornare, ligula lorem tristique nisi, at tempor ante ipsum a turpis. Donec pellentesque aliquet mauris, et laoreet nibh laoreet ut. In a turpis id eros commodo laoreet. Sed hendrerit elementum sagittis. Aliquam placerat arcu non rutrum rutrum. Maecenas eu lectus lacinia, consectetur justo vel, pharetra tortor. Vivamus fringilla porta magna vitae suscipit.
Nunc libero tortor, rhoncus vitae augue ut, auctor aliquam nunc. Donec laoreet, massa eget pellentesque feugiat, ex eros viverra massa, at gravida urna justo at tellus. Morbi vulputate nunc dolor, vitae dictum nibh maximus sed. Sed a massa est. Donec suscipit dolor at lobortis dictum. Mauris feugiat nunc vehicula mollis vehicula. Donec mattis blandit nisl, nec tristique tellus tristique quis. In lobortis est eu felis facilisis, eget finibus velit cursus. Sed faucibus congue congue.
Vivamus volutpat, leo vel scelerisque placerat, purus arcu malesuada enim, quis tempor mauris tellus sit amet sem. Fusce feugiat gravida orci. Etiam non dui sodales, sodales justo eget, varius diam. Nulla lectus leo, hendrerit eu urna id, commodo pulvinar odio. Quisque efficitur posuere urna non maximus. Fusce id purus lorem. Pellentesque molestie tortor non sagittis commodo. Praesent et augue tincidunt, porta diam vitae, lacinia orci. Quisque vehicula non nunc non tincidunt. Quisque magna turpis, gravida at interdum eu, rutrum accumsan ante.
Cras id sagittis nulla. Donec lacus augue, suscipit vel faucibus id, faucibus in lorem. Suspendisse semper augue a massa rhoncus, at ullamcorper diam porttitor. Vivamus ac urna nisi. Vivamus et odio interdum, faucibus nisi a, convallis nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed molestie, nunc ac cursus congue, metus quam blandit nisl, quis pulvinar augue dolor sollicitudin tortor. Praesent suscipit quis urna vel egestas. Praesent placerat quis nulla ac faucibus. Fusce facilisis, tortor id vestibulum tincidunt, orci elit egestas lorem, quis lacinia ante velit sed justo.
Etiam porttitor, eros tempor elementum vehicula, lorem dolor convallis urna, vitae efficitur diam nibh non felis. Nulla blandit viverra gravida. Aliquam bibendum magna risus, et consectetur leo tempor ut. Phasellus auctor faucibus quam, ut dignissim est tempor non. Sed sollicitudin ornare porttitor. Sed nibh est, tincidunt vitae felis dictum, bibendum feugiat magna. Mauris vitae libero sed neque mollis luctus vel eu augue. Praesent a lacus quis nisi pretium gravida vel sit amet sapien. Quisque ut sodales turpis. In ornare nisl sed auctor tempus. Sed eleifend efficitur erat in ullamcorper. Vivamus rutrum molestie lacus, in laoreet nibh placerat sed.
</p>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © Your Website</small>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
</body class="d-flex flex-column">
</html>
I am developing a website where I create different graphics with D3.js
I have a main page called "index.html" where I have a piece of text for the introduction. I have a second page called "GenrePie.html" which has a pie chart.
I want to put the "GenrePie.html" page in my "index.html" page.
On several forums I found a way to do it but it doesn't work for me :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#includedPieContent").load("GenrePie.html");
});
</script>
this is my index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
</div>
</body>
</html>
I would like to put my pie chart after the second paragraph
Thank you in advance
You can use embed or iframe whichever suits you,
I will recommend embed as its looks clean.
Quick Demo : https://jsfiddle.net/vikas_saini/kupb0Lh9/5/
<div>
<h1>SOME TEXT</h1>
<embed src="https://example.com/" style="width:500px; height: 300px;">
<iframe src="https://example.com/">
<p>Your browser does not support iframes.</p>
</iframe>
</div>
Your Code Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maxes</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 id="title">Forever</h1>
<p id="intro">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet. </p>
</div>
</div>
<div class="principal">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id mi vitae felis faucibus finibus eu nec arcu. Curabitur quis ultricies magna. Cras rutrum metus est, id hendrerit mauris mattis a. Etiam suscipit sodales urna eget fringilla. Donec diam lorem, laoreet commodo ligula nec, mollis mattis mi. Mauris luctus ut nisi ac viverra. Integer dictum eu mi a aliquet.
</p>
<embed src="GenrePie.html" style="width:500px; height: 300px;">
</div>
</body>
</html>
Let me know if this did not work for you.
i have this code
<html lang='es'>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
<script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
<script src="bootstrap337/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0.5%;
}
</style>
</head>
<body>
<div class='col-md-12' style='background-color:#DDD'>
<h1 class='text-center'>Sea bienvenido a la web</h1><hr/>
</div>
<hr/>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis. Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada urna tempor. In eget massa ligula..</p>
</div>
<div class='col-md-6' style='background-color:#EEE'>
<div class='col-md-6' style='background-color:#AAA'>
<p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
</div>
<p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt. Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
</div>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo, id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
</div>
</body>
</html>
But the problem is the following: i want the text outside the div (thereis a div inside a div)
mid div dont get right text padding, as i mark in the image
How to solve the text right padding?
Image with the code
Give that element a right/bottom margin.
.in-text-block {
margin: 0 1em 1em 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<html lang='es'>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap337/css/normalize.css">
<script src="bootstrap337/js/jquery-3.2.0.min.js"></script>
<script src="bootstrap337/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
padding:0.5%;
}
</style>
</head>
<body>
<div class='col-md-12' style='background-color:#DDD'>
<h1 class='text-center'>Sea bienvenido a la web</h1>
<hr/>
</div>
<hr/>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt dictum lacus sed pellentesque. Suspendisse dignissim eros eget lacus commodo, nec congue ante sollicitudin. Ut consequat metus at metus volutpat congue sit amet facilisis turpis.
Fusce vitae eros lectus. Nullam blandit massa ac erat tempor fermentum. Aenean tristique eu neque at sagittis. Curabitur sed dui ut orci rutrum fringilla. Phasellus suscipit lacus ut iaculis interdum. Nunc vehicula lacus at risus luctus, non malesuada
urna tempor. In eget massa ligula..</p>
</div>
<div class='col-md-6' style='background-color:#EEE'>
<div class='col-md-6 in-text-block' style='background-color:#AAA;'>
<p class='text-justify'>Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.</p>
</div>
<p class='text-justify'>Nam ac fermentum nulla. Donec nibh lacus, feugiat vitae magna sit amet, mollis ornare lorem. Etiam a auctor enim. Nam sed egestas est. Vivamus sit amet cursus diam, non aliquet urna. Mauris viverra commodo fringilla. Donec rutrum sodales ex a tincidunt.
Integer volutpat mauris eget dictum tristique. Suspendisse quis sagittis nisl. In purus lorem, volutpat in eros cursus, porta faucibus ligula. Sed non dolor convallis, efficitur urna a, congue velit. Pellentesque nec ante sit amet leo ultricies
fringilla efficitur sit amet est. Proin ut ullamcorper felis. Quisque eget iaculis arcu.</p>
</div>
<div class='col-md-3' style='background-color:#DDD'>
<p class='text-justify'>Nunc suscipit augue iaculis, facilisis ex a, tristique tellus. Nullam vel tellus libero. Nulla facilisi. Suspendisse potenti. Mauris in varius diam. Aliquam non malesuada tellus. Nullam pulvinar tellus id aliquet fermentum. Quisque sed dictum justo,
id mollis ante. In hac habitasse platea dictumst. Donec eu nisi facilisis metus porta consectetur id id nisi.</p>
</div>
</body>
</html>
You have a lot of problems in your code.
Using bootstrap you should always put everything in a "container".
Then inside the container have a "row", then inside rows you have a "column".
example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Some text
</div>
</div>
</div>
If you want to add more rows and coloumns you still have to keep it "in order" and always only put columns inside of rows and rows inside of columns (or inside containers).
This will make your page work better because in Bootstrap there are paddings and margins that even each other out.
Then if you want to add padding to a specific div, it's better not to override the bootstrap classes, nor add padding to * which effects everything.
Instead- add a class to the div you want to add padding to and add padding for that class only.
example
`<style>
.extra-padding {
padding: 20px;
}
</style>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
</div>
<div class="col-xs-9 extra-padding">
</div>
</div>
</div>
</div>
</div>`
So, this is the weirdest thing ever. I was working on a project on codepen(of course in codepen is a lot easier).
How do you migrate from codepen? Well, you pretty much just add the basic html tags and links so you can communicate between the css and js.
But although I'm doing all of that correctly(also adding the required libraries), my code does not work correctly.
What my code should be doing:
- Allow the user to drag the windows
But it's not!
Even more, all of the Jquery and Jquery UI functions are not working correctly. When I looked at the console, I found the following error "ReferenceError: $ is not defined".
Alright, now the code I'm using is here: http://codepen.io/julian-a-avar/pen/xbaRJz
And as expected everything is the same but the HTML file:
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
</body>
</html>
Yes, the file name are correct, and I'm using C9.io
Please help out, maybe I'm missing something.
ReferenceError: $ is not defined
I figured that it happened in your script.js where you implement the drag and drop functions.
So fixing the order of the scripts might fix the issue.
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</head>
You included your script before jQuery, so $ doesn't exist.
Order matters.
You should add your script after you have loaded the jquery libraries.
It is also good practice to load scripts at the end of your file, just before </body>.
<!doctype html>
<html>
<head>
<!-- INFO -->
<meta charset="UTF-8">
<meta name="application-name" content="Orion OS">
<meta name="author" content="Julian Avar Campopiano">
<meta name="description" content="">
<meta name="keywords" content="">
<!-- CSS -->
<link rel="stylesheet" href="main.css" type="text/css">
<!-- JS -->
<script src="script.js"></script>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div id="taskbar">
<div id="start_menu"></div>
<div id="menu">
<div class="app app1">W1</div>
<div class="app app2">W2</div>
</div>
</div>
<div class="window w1">
<div class="head">
<div class="title">Window 1</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<div class="window w2">
<div class="head">
<div class="title">Window 2</div>
<div class="buttons">
<div class="close"></div>
<div class="maximize"></div>
<div class="minimize"></div>
</div>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tristique massa ipsum, eu posuere tellus interdum vel. Nullam quis lectus feugiat, malesuada enim ac, malesuada sapien. Cras elit tellus, consequat id justo non, convallis interdum nisi. Sed pulvinar, ipsum in imperdiet malesuada, lorem turpis gravida urna, consectetur auctor leo lectus et est. Nunc in pulvinar nulla, in pharetra dolor. Nunc accumsan felis interdum commodo pretium. Praesent rutrum neque et orci congue imperdiet. Fusce et gravida dui. Donec gravida in mauris vitae aliquam. Quisque semper est ut orci lacinia facilisis.
</p>
</div>
</div>
<!-- Libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<!-- JS -->
<script src="script.js"></script>
</body>
</html>