I am trying to achieve something like this:
iiii text
iiii text
iiii text
text
text
Where
iiii
iiii
iiii
is the image and on the right is the text.
If i try class float-left of bootstrap i obtain this:
iiii text
iiii text
iiii text
text <-- Text under the image
text
Basically the remaining text goes under the image.
What is cleanest way to put the image on the left, also for the text that goes down of the image?
The correct element to use is the media object - that has a media-left and and media-body element which contains the text and an optional heading.
.media-body {
padding: 16px;
}
.media-heading {
font-size: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12">
<div class="media-object">
<div class="media">
<div class="media-left">
<img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" class="media-object" alt="fluffy kitten" height="150" title="Fluffy Kiten" data-toggle="tooltip" data-placement="right">
</div>
<div class="media-body">
<div class="media-text-content">
<h3 class="media-heading">Fluffy kitten</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Alternatively - you can swap the text and image around and use media-right for a right sided image with the heading and text on the left.
.media-body {
padding: 16px;
}
.media-heading {
font-size: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<div class="row">
<div class="col-12">
<div class="media-object">
<div class="media">
<div class="media-body">
<div class="media-text-content">
<h3 class="media-heading">Fluffy kitten</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
</div>
</div>
<div class="media-right">
<img src="https://i.pinimg.com/originals/e5/3c/fb/e53cfb282846313a69daf9755bfaf339.jpg" class="media-object" alt="fluffy kitten" height="150" title="Fluffy Kiten" data-toggle="tooltip" data-placement="right">
</div>
</div>
</div>
</div>
</div>
Just make use of a row with two columns:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="row">
<div class="col-6">
<img src="https://placehold.it/100">
</div>
<div class="col-6">
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text<br />
Text
</div>
</div>
Related
Fairly new to web development. I am attempting to make a responsive website for both mobile and desktop. I'll be honest, its terrible right now. But I'm working on it. I currently have 2 major issues that I've been fighting with for about a full day now. Also Yes I am running django on the backend and vue as a cdn on the front.
I have deployed rellax js into the website for a paralax effect however its creating an ugly overlap and I can't seem to get ride of it.
Once I deployed rellax js my text that was supposed to be center of the landing page disappeared to the bottom. I would like it centered.
Could anyone help me with these issues? Also any input as to how to make this mobile friendly would be awesome, I was just going to lock the images at a certain size if the screen was small.
HTML
{% include 'core/navbar.html' %} {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="{% static "css/style.css" %}" />
<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<link href="assets/vendor/aos/aos.css" rel="stylesheet" />
<link
href="assets/vendor/bootstrap/css/bootstrap.min.css"
/>
<link
href="assets/vendor/bootstrap-icons/bootstrap-icons.css"
/>
<link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" />
<link
href="assets/vendor/glightbox/css/glightbox.min.css"
rel="stylesheet"
/>
<link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma#0.9.3/css/bulma.min.css"
/>
<title>Tester Site</title>
</head>
<body>
<section id="hero" class="d-flex align-items-center">
<div id="bg">
<div class="bg">
<img src="{% static "media/ocean.png" %}" class="bg" alt="" data-rellax-speed="2" data-rellax-percentage="0.5" />
<img src="{% static "media/girl.png" %}" class="girl" data-rellax-speed="7" data-rellax-percentage="0.5" style="top: -195px; height: 1000px; width: auto;" />
</div>
</div>
<div
class="col-sm-2"
data-aos="zoom-in"
data-aos-delay="100"
>
<h1>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">x</span>
<span class="blast" aria-hidden="true" style="opacity: 1">p</span>
<span class="blast" aria-hidden="true" style="opacity: 1; padding-right: 8px">l
</span>
<span class="blast" aria-hidden="true" style="opacity: 1">o</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
</h1>
<h2>
<span class="blast" aria-hidden="true" style="opacity: 1">C</span>
<span class="blast" aria-hidden="true" style="opacity: 1">r</span>
<span class="blast" aria-hidden="true" style="opacity: 1">e</span>
<span class="blast" aria-hidden="true" style="opacity: 1">a</span>
<span class="blast" aria-hidden="true" style="opacity: 1">t</span>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 3px"
>e</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>a</span
>
<span
class="blast"
aria-hidden="true"
style="opacity: 1; padding-right: 5px"
>
<div id="container">
<div id="text"></div>
<div id="cursor"></div>
</div>
</span>
</h2>
About Me
</div>
</section>
<footer id="footer" data-rellax-speed="10" data-rellax-percentage="-1.0"></footer>
<section id="about" class="about">
<div class="container" data-aos="fade-up">
<div class="section-title">
<br>
<h2>
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row">
<div class="col-lg-4">
<img src="https://webp.bearsofficialsstore.com/237169917.webp" class="img-fluid" alt="">
</div>
<div class="col-lg-8 pt-4 pt-lg-0 content">
<h3>Illustrator & UI/UX Designer</h3>
<p class="fst-italic">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua.
</p>
<div class="row">
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Birthday:</strong> 1 May 1995</li>
<li><i class="bi bi-rounded-right"></i> <strong>Website:</strong> www.example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Phone:</strong> +123 456 7890</li>
<li><i class="bi bi-rounded-right"></i> <strong>City:</strong> City : New York, USA</li>
</ul>
</div>
<div class="col-lg-6">
<ul>
<li><i class="bi bi-rounded-right"></i> <strong>Age:</strong> 30</li>
<li><i class="bi bi-rounded-right"></i> <strong>Degree:</strong> Master</li>
<li><i class="bi bi-rounded-right"></i> <strong>PhEmailone:</strong> email#example.com</li>
<li><i class="bi bi-rounded-right"></i> <strong>Freelance:</strong> Available</li>
</ul>
</div>
</div>
<p>
Officiis eligendi itaque labore et dolorum mollitia officiis optio vero. Quisquam sunt adipisci omnis et ut. Nulla accusantium dolor incidunt officia tempore. Et eius omnis.
Cupiditate ut dicta maxime officiis quidem quia. Sed et consectetur qui quia repellendus itaque neque. Aliquid amet quidem ut quaerat cupiditate. Ab et eum qui repellendus omnis culpa magni laudantium dolores.
</p>
</div>
</div>
</div>
</section><!-- End About Section -->
<!-- ======= Skills Section ======= -->
<section id="skills" class="skills">
<div class="container" data-aos="fade-up">
<div class="section-title">
<h2>Skills</h2>
<p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
</div>
<div class="row skills-content">
<div class="col-lg-6">
<div class="progress">
<span class="skill">Video Editing <i class="val">100%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Photoshop <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">Audio Editing <i class="val">75%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="progress">
<span class="skill">Content Creation <i class="val">80%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress">
<span class="skill">WordPress/CMS <i class="val">90%</i></span>
<div class="progress-bar-wrap">
<div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</section><!-- End Skills Section -->
</div>
</template>
<br>
<br>
<br>
<br>
<!-- End Hero -->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.14"></script>
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax#master/rellax.min.js"></script>
<script>
// Center all the things!
var rellax = new Rellax('.girl', {
center: false
});
var rellax = new Rellax('.bg', {
center: true
});
</script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
-->
<script>
var _CONTENT = [
"Simple Life",
"Meaningful life",
"Positive Life",
"masterpiece"
];
// Current sentence being processed
var _PART = 0;
// Character number of the current sentence being processed
var _PART_INDEX = 0;
// Holds the handle returned from setInterval
var _INTERVAL_VAL;
// Element that holds the text
var _ELEMENT = document.querySelector("#text");
// Cursor element
var _CURSOR = document.querySelector("#cursor");
// Implements typing effect
function Type() {
// Get substring with 1 characater added
var text = _CONTENT[_PART].substring(0, _PART_INDEX + 1);
_ELEMENT.innerHTML = text;
_PART_INDEX++;
// If full sentence has been displayed then start to delete the sentence after some time
if(text === _CONTENT[_PART]) {
// Hide the cursor
_CURSOR.style.display = 'none';
clearInterval(_INTERVAL_VAL);
setTimeout(function() {
_INTERVAL_VAL = setInterval(Delete, 60);
}, 1000);
}
}
// Implements deleting effect
function Delete() {
// Get substring with 1 characater deleted
var text = _CONTENT[_PART].substring(0, _PART_INDEX - 1);
_ELEMENT.innerHTML = text;
_PART_INDEX--;
// If sentence has been deleted then start to display the next sentence
if(text === '') {
clearInterval(_INTERVAL_VAL);
// If current sentence was last then display the first one, else move to the next
if(_PART == (_CONTENT.length - 1))
_PART = 0;
else
_PART++;
_PART_INDEX = 0;
// Start to display the next sentence after some time
setTimeout(function() {
_CURSOR.style.display = 'inline-block';
_INTERVAL_VAL = setInterval(Type, 120);
}, 200);
}
}
// Start the typing effect on load
_INTERVAL_VAL = setInterval(Type, 100);
</script>
</body>
</html>
Image 1
Image 2 after scrolling down
as you can see the background image that is being scrolled over is popping out on the other side and looks nasty. Any idea how to fix that?
You can also see how the about btn and the txt are all right there at the bottom and not at the top and centered where I am trying to put them.
Any help would be amazing!!
Basically, I am having trouble figuring out how to move an image to the right of a card using bootstrap, similar to the function of card-img-top or bottom.
Using the Bootstrap Documentation, this is what I've done.
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">...</h5>
<p class="card-text">....</p>
Go somewhere
<img class="float-right" src="Images/template.png" alt="sans" width=200px/>
</div>
</div>
</div>
Float-right doesn't help, as we want the image to be completely on the right side of the card.
This is what it looks like: enter image description here
And this is what it should look like enter image description here
In the picture where is should look like you have two columns of content.
text and image.
So let's try:
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="row card-body">
<div class="col-sm-6">
<h5 class="card-title">...</h5>
<p class="card-text">....</p>
Go somewhere
</div>
<img class="col-sm-6" src="Images/template.png" alt="sans"/>
</div>
</div>
</div>
Use the grid row&cols inside the card-body...
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<h5 class="card-title">Title</h5>
<p class="card-text">Some text ehre</p>
Go somewhere
</div>
<div class="col-sm-6 text-right">
<img class="" src="//placehold.it/200" alt="sans" width="200px">
</div>
</div>
</div>
</div>
</div>
</div>
Or, use flexbox (d-flex) with 2 containers...
Demo: https://www.codeply.com/go/0FzyCXffUd
Here is how I solved it with Bootstrap 5. I wanted the image on the right for large screens but on top for anything smaller.
The secret sauce seem to be row + flex-row-reverse + card-img-end, for an image on the right.
<div class="container my-5">
<div class="card row flex-row-reverse">
<img class="col-lg-4 card-img-end img-fluid p-0" src="https://picsum.photos/300/200" />
<div class="col-lg-8 card-body">
<h1 class="card-title">Blog entry</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
If you want the image on the left the sauce is row + flex-row + card-img-start.
<div class="container my-5">
<div class="card row flex-row">
<img class="col-lg-4 card-img-start img-fluid p-0" src="https://picsum.photos/300/200" />
<div class="col-lg-8 card-body">
<h1 class="card-title">Blog entry</h1>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
I find display flex useful. You will need to fiddle with the column sizing to cater for your image size.
.card-body {
display: flex;
flex-wrap: nowrap;
}
.card-body>div {
padding: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<div>
<h5 class="card-title">Title</h5>
<p class="card-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."</p>
Go somewhere
</div>
<div>
<img src="https://picsum.photos/100/100" alt="sans" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
can anyone pls explain the different instances in which css won't load properly in an express application? I know that for example, using relative paths css/style.cssinstead of absolute paths /css/style.css can cause the css to not render properly in my webpages; but I was wondering if there's something else that I don't know of that could also cause such a problem?
here's the html code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>View Property</title>
<!-- Load fonts -->
<link href="https://fonts.googleapis.com/css?family=Abel|Alegreya|Amatic+SC|Architects+Daughter|Barrio|Cabin|Dancing+Script|Dosis|Exo+2|Gloria+Hallelujah|Inconsolata|Josefin+Sans|Karla|Source+Code+Pro|Yanone+Kaffeesatz" rel="stylesheet" type='text/css'>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="/css/normalize.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.css" />
<link rel="shortcut icon" href="/../favicon.ico">
<link rel="stylesheet" href="/css/viewProperty.css">
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" type="text/css" href="/css/component.css" />
<!--style -->
<script src="/js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<header class="main-header">
<i class="fa fa-bars"></i>
<!-- Offsite navigation -->
<nav class="menu">
<i class="fa fa-close"></i>
<h3> spacelist </h3>
<h5><a data-scroll data-toggle="modal" data-target="#myModa3" class="btn button two">Add Property</a></h5>
<ul class="nav">
<li class="cl-effect-1"><a data-scroll href="contactus.html">Contact us</a></li>
<li class="cl-effect-1"><a data-scroll data-toggle="modal" data-target="#myModa4">About</a></li>
<li class="cl-effect-1"><a data-scroll href="#portfolio">Safety</a></li>
<li class="cl-effect-1"><a data-scroll href="#terms">Terms</a></li>
<li class="cl-effect-1"><a data-scroll href="#privacy">Privacy</a></li>
</ul>
</nav>
<form class="form-group">
<div class="search">
<input type="text" id="searchBox" class="search__input search-field" placeholder="Search" autocomplete="off"/>
<button class="fa fa-search search__button"></button>
<ul id="searchResults" class="term-list hidden"></ul>
</div>
</form>
<div class="profile">
<img src="images/opeyemi.jpg" alt="photograph of odedeyi opeyemi" class="profile-photo">
Opeyemi Odedeyi
</div>
</header><!--/.main-header-->
<section class="viewww">
<h1>View Your Property</h1>
</section>
<section class="body content">
<div class="container">
<div class="layout" style="background-image: url(images/test.jpg);"></div>
<h6>Joy 4 Fame Hostel</h6>
<div class="price">
<p>GH₵ 1,000 <span>per Month</span></p>
</div>
<div class="lorem">
<p>Donec sollicitudin molestie malesuada. Curabitur aliquet quam id dui posuere blandit. Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Sed porttitor lectus nibh. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Proin eget tortor risus. Proin eget tortor risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
</div>
<div class="buttons">
<a class="btn lass edit">Edit</a> <a class="btn lass view">Details</a>
</div>
</div>
</section>
<!-- Footer start -->
<footer class="main-footer">
<!-- <div class="foot">
<span>Icon made by Freepik from www.flaticon.com</span>
</div> -->
<div class="foot2">
<span>© spacelist 2017</span>
</div>
</footer>
<!-- Footer end -->
<!-- Contact section start -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/autoSuggest.js"></script>
<script src="/js/custom-file-input.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/smooth-scroll.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Load custom js for theme -->
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>
also back end js code
router.get('/viewProperty/:id', AccessControl.ensureAuthenticated,
function(req, res, next) {
User.findOne({_id: req.params.id})
.populate('properties')
.then(user => {
let model = {
properties: user.properties
};
console.log(user);
res.render('viewProperty', model);
});
});
//was trying test the issue on different routes below
router.get('/test', (req, res, next) => {
res.render('viewProperty');
});
When I inspect element and moved cursor on any particular section tag.
the section tag highlighting only top of the main parent div only with height 0 . Not showing that actual section tag where it is like display inline-block. I just want to know why it's like this. what is proper way to use section tag.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-md-12">
<section id="amenities-part">
<div class="col-md-6">
<h2>Amenities</h2>
<span>Lift</span> <br><span>AC</span>
</div>
</section>
<section id="services-part">
<div class="col-md-6">
<h2>Services</h2>
<span>Cooking</span> <br><span>Cooking</span>
</div>
</section>
<section id="safety-part">
<div class="col-md-6">
<h2>Safety</h2>
<span>First Aid Kit</span> <br><span>Fire Extinguisher </span>
</div>
</section>
<section id="local-service-part">
<div class="col-md-6">
<h2>Local Area Service</h2>
<span>jfh</span> <br><span>jfh</span>
</div>
</section>
<section id="handler-detail-part">
<div class="col-md-6">
<h2>Handler Detail</h2>
<img class="img-responsive" alt="Handler-profile-picture" width="75px" src="https://www.primomedico.com/wp-content/uploads/2015/09/Prof-Dr-Schmidli-Juerg-Spezialist-Gefaesschirurgie-Bern-Portrait_klein.jpg">
<p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</section>
</div>
<div class="col-md-12">
<section id="amenities-part" class="col-md-6">
<div>
<h2>Amenities</h2>
<span>Lift</span> <br><span>AC</span>
</div>
</section>
<section id="services-part" class="col-md-6">
<div>
<h2>Services</h2>
<span>Cooking</span> <br><span>Cooking</span>
</div>
</section>
<section id="safety-part" class="col-md-6">
<div>
<h2>Safety</h2>
<span>First Aid Kit</span> <br><span>Fire Extinguisher </span>
</div>
</section>
<section id="local-service-part" class="col-md-6">
<div>
<h2>Local Area Service</h2>
<span>jfh</span> <br><span>jfh</span>
</div>
</section>
<section id="handler-detail-part" class="col-md-6">
<div>
<h2>Handler Detail</h2>
<img class="img-responsive" alt="Handler-profile-picture" width="75px" src="https://www.primomedico.com/wp-content/uploads/2015/09/Prof-Dr-Schmidli-Juerg-Spezialist-Gefaesschirurgie-Bern-Portrait_klein.jpg">
<p>Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper.</p>
</div>
</section>
</div>
you can also use this it simple
The HTML element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each should be identified, typically by including a heading (- element) as a child of the element.
Here is a example:
Before
<div>
<h2>Heading</h2>
<img src="bird.jpg" alt="bird">
</div>
After
<section>
<h2>Heading</h2>
<img src="bird.jpg" alt="bird">
</section>
I have got following code snippet, where the widths of columns should be working, but somehow its not happening and both divs with column class are coming in next row.
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="large-8 columns"> Hello </div>
<div class="large-4 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.
</div>
</body>
</html>
Your foundation.min.css link needs to have a rel="stylesheet" property to specify it is a stylesheet relationship. Otherwise it wont be used as one.
You are also missing a closing </div> on your large-8 columns line.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.min.js"></script>
</head>
<body>
<div class="row">
<div class="small-2 columns"> Hello </div>
<div class="small-10 columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque metus vitae felis bibendum.</div>
</div>
</body>
</html>`