I tried to display information in form of cards. Each cards is inside ordered list li. On adding more card in form of li, the content goes out of page from top. How can I set the height to adjust automatically according to the number of cards.
Html code
<body>
<section>
<div class="leftBox">
<div class="content">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi
nihil
cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus
iure
ad!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
deleniti corporis deserunt doloribus maxime.
</p>
View Details
</div>
<div style="clear: both;"></div>
</li>
<li>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere
deleniti corporis deserunt doloribus maxime.
</p>
View Details
</div>
<div style="clear: both;"></div>
</li>
</ul>
</div>
</section>
</body>
Corresponding CSS
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
section{
width: 100%;
height: 100vh;
background: #323a45;
background-size: cover;
}
``
Can you please check the below code? Hope it will work for you. We have used display flex property to create cards element, it seems like you have used float element because of float it creates height alignment issue. We provide you two alignment structure so you can use any of according to your convenience.
Please refer to this link: https://jsfiddle.net/yudizsolutions/1vLqr6uo/2/
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
section {
width: 100%;
height: 100vh;
/* background: #323a45;*/
background-size: cover;
}
ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
ul li {
width: 33.33%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.events.copy ul li {
display: block;
}
<body>
<section>
<div class="leftBox">
<div class="content">
<h1>Events</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae quia atque cupiditate commodi nihil cum? Autem rem voluptates aperiam. Est non dolor, unde quam laborum eveniet quidem doloribus iure ad!
</p>
</div>
</div>
<div class="events">
<ul>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
</ul>
</div>
<div class="events copy">
<ul>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
<li>
<div>
<div class="time">
<h2>2<br><span>April</span></h2>
</div>
<div class="details">
<h3>Celestial</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus
maxime.Lorem ipsum dolor sit, amet consectetur adipisicing elit. Inventore nam veritatis facere deleniti corporis deserunt doloribus maxime.
</p>
</div>
</div>
View Details
</li>
</ul>
</div>
</section>
</body>
Related
This question already has answers here:
How can you set the height of an outer div to always be equal to a particular inner div?
(2 answers)
Closed 4 months ago.
I have align-items: stretch flexbox and inside this flexbox I have image and some text content.
text content is static and I need height of img to be as same as height of text content.
When I use different imgs with different aspect ratio I see different height on each img but I want the height of all images to be same.
*Please test snippet in fullscreen mode to see the problem
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.0125em;
line-height: 1.93rem;
word-break: break-all;
}
.title img {
object-fit: cover;
width: 150px;
height: 100%;
}
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
if your text is going to contain the same line heights, you can use em measurements, 1em being 1 line of rem text size, if you plan on having different text contentss and line heights per span, you could also do this by having a class for each image, and then changing the height through those rather than a universal img tag, meaning you can change settings per image, rather than universally in your container.
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
align-items: center;
display: flex;
flex-wrap: wrap;
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.0125em;
line-height: 1.93rem;
word-break: break-all;
}
.title > img {
object-fit: cover;
width: 150px;
height: 7.25em;
}
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img
src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt"
/>
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae
quia fugiat, minima eos fuga amet tenetur neque officia optio nulla
voluptatem ducimus dolores, cum animi tempore veritatis libero
repellat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
You have to give height and width to the parent of img.
I have created a snippet for this.
.card {
display: flex;
flex-direction: row;
align-items: stretch;
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.1);
margin: 20px;
}
.title {
width: 150px
}
.content{
width: calc(100% - 150px)
}
.title img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
<div class="card">
<div class="title">
<img src="https://s3-alpha-sig.figma.com/img/b579/835c/2b73668d5d42b127f5ed4e206c9c6576?Expires=1668384000&Signature=DoZ8O~AWDj6UhiZgP-5njh0zCqIk0ahZTAqvBVDjvyibc0seggNTv9lBjN-Xhkr6g0oiPnKyfGrqyhzfuPYN-S0T132EdQjEp1LH8FpNHmgBm1SyYVoxMQhnyCcsAF762M6~7lQ5SBqsujpbdmxwee6MChnRRrp706gkHXUYml3Mjd3kR7EsqViVjm39GTyW9DEPIer-qFBTQkILSGrkKjM-9zTitycyzO6c9no0PpclhAqpeeta0sz1JxmsSz7tVHQI9CoDLXWc0epbY7zcnhPqOKYqGkGf2~IS0S46x01CSvTDYIWj0dTt-vma4nOavEWShJhKBXwyjyk5VbQoHQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt" />
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio nulla voluptatem ducimus dolores, cum animi tempore veritatis libero repellat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
<div class="card">
<div class="title">
<img src="https://s3-alpha-sig.figma.com/img/bb5a/75f4/c083c0a5a79974bd94152c99b0f0d213?Expires=1668384000&Signature=Um5O0ddvXIROx5txgjSCEF1HcQVv2n6PVHdV81zu1KfaqIZUQw3qZDDgdBAjpnSPJ35-taxYHPLFlhV~tIPoxtJMlXFbJpihC6XIKaiyBUyuXJEicoLCm9fKm5UwbbFLJRU63MSHEDJWVYh8sTxAFaAEwNX~XoVgkfgN0c6ozOdImLOc0G8Hs3WYnDiURZ8jglC25XJRb9uPj7hiiL6tdCOWinA2F9uyLGtSxKHi~RU6ESMKgWOGpavQdeJ5M~iIRpkge2Ka2ySerfZh4184XLTxO8EUG-cin-lW7ncGcjiqLtDIXyt2PyQptpTIENAPMH7dSn1TvvpzjFbadavvnQ__&Key-Pair-Id=APKAINTVSUGEWH5XD5UA"
alt="alt" />
</div>
<div class="content">
<p class="text-caption grey3--text">2day ago</p>
<p class="text-subtitle-1 grey5--text font-weight-medium">some title</p>
<p class="ellipsis">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio nulla voluptatem ducimus dolores, cum animi tempore veritatis libero repellat. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Id beatae quia fugiat, minima eos fuga amet tenetur neque officia optio
</p>
</div>
</div>
I have a problem concerning my mobile menu and slider. I want the menu will on the top side of the slider. But when I'm clicking on the menu icon, the menu isn't shown. I tried in many ways but I still not solved the problem. Thank you in advance.
`
lorem
<body>
<header>
<nav>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<img src="/img/logo.svg" alt="logo">
<ul>
<li class="el1">lorem</li>
<li class="el1">lorem</li>
<li class="el1">lorem</li>
<li class="el1">lorem</li>
</ul>
</nav>
</header>
<div class="container">
<div class="slider">
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
<div class="slide slide2">
<div class="caption">
<h2>Slide2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
<div class="slide slide3">
<div class="caption">
<h2>Slide3</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
<div class="slide slide1">
<div class="caption">
<h2>Slide1</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corrupti nemo incidunt deserunt obcaecati vero dolor explicabo tempore, rem quas cum vitae magni dolores. Delectus voluptatem dicta quam assumenda est.</p>
</div>
</div>
</div>
</div>
</body>
Code: https://codepen.io/FilipoV/pen/ExNowKM
you will be use z-index:1; in your css.
nav ul {
float: right;margin-right: 25px;
z-index: 1;
}
I entered the following code into app.component.html, however when viewing the angular app in the browser, nothing loads.
I have removed all <html><body> and <head> tags. As I believed this was the problem.
app.component.html
<div class="maincont">
<div class="nav">
<ul>
<li>
{{title}}
</li>
<li>
Projects
</li>
<li>
Login
</li>
</ul>
</div>
<div class="header">
<div class="heading">
<center>{{title}}</center>
</div>
</div>
<div class="projects" id="projects">
<h1>Projects</h1>
<div class="grid">
<div class="cell">
<h1>Lorem, ipsum dolor.</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt fugiat ab ducimus culpa ratione iure
fugit, placeat dolor eveniet dignissimos!</p>
</div>
<div class="cell">
<h1>Lorem, ipsum.</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto repudiandae quia dolorum, esse,
perferendis odio, temporibus debitis inventore vitae officia animi. Quas temporibus voluptate consequatur
mollitia dolorem optio vel libero!</p>
</div>
<div class="cell">
<h1>Lorem ipsum dolor sit.</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti molestiae deserunt voluptates tenetur
ducimus dolore similique, ratione sit blanditiis! Quaerat illo earum autem hic?</p>
</div>
<div class="cell">
<h1>Lorem.</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veritatis nisi assumenda itaque inventore neque
exercitationem. Voluptatem libero ducimus eos aliquam porro odio modi facilis.</p>
</div>
</div>
</div>
</div>
The other files (app.component.ts, app.component.css) are unchanged after running;
ng new App
I tried your Html and yea, looks like the <center> tag is not supported. <div style="text-align:center"></div> should fix it!
I came to this conclusion by using Developer Tools (F12) while running your code and looking at the "Console" for guidance
The <center> tag is not supported in HTML5. Use CSS instead. The <center> tag is used to center-align text.
so use css instead of using center tag
I am trying to get this red line exactly between the columns, precisely to make it stand between Lorem ipsum's and paragraphs. The problem is that it should be one long line that goes through the page, but this one breaks because of the new row. Is there a better way to do it maybe..?
Here's the current state: http://codepen.io/anon/pen/WReerM
.content--border {
border-right: 2px solid red;
}
<div class="container content">
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
</div>
The easiest way is to move content--border class to col-md-7 instead of col-md-3.
You can move the border to the left edge of col-md-7 instead.
.content--border {
border-left: 2px solid red;
}
Also can put it in a media query so it disappears on smaller screens:
#media screen and (min-width: 992px) {
.content--border {
border-left: 2px solid red;
}
}
Demo here
Move the border to the left of your other column:
.content--border {
border-left: 2px solid red;
}
see my working codepen:
http://codepen.io/egerrard/pen/pRzzRx
HTML:
<div class="container content">
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 ">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7 content--border">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
</div>
CSS:
.content--border {
border-left: 2px solid red;
}
You can use :before pseudo element of parent element (.container) to draw this line. This will allow to have straight line without any breaks irrespective of content length in both columns.
Note: Please see the demo in full page mode.
Necessary CSS:
.container {
position: relative;
}
#media (min-width: 992px) {
.container:before {
position: absolute;
margin-left: -2px;
background: red;
display: block;
content: '';
width: 2px;
bottom: 0;
left: 25%;
top: 0;
}
}
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
.container {
position: relative;
}
#media (min-width: 992px) {
.container:before {
position: absolute;
margin-left: -2px;
background: red;
display: block;
content: '';
width: 2px;
bottom: 0;
left: 25%;
top: 0;
}
}
<div class="container content">
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 2</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor! Lorem ipsum dolor sit
amet, consectetur adipisicing elit. A asperiores, quisquam illo animi eaque repudiandae excepturi tenetur, vel laudantium quas corporis explicabo laborum non minus dolor temporibus nesciunt vero. Id!
</p>
</div>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3</p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis facere assumenda magni dolor velit ullam deleniti tempora! Officia quo laboriosam dicta, animi ipsam expedita quasi magnam velit eligendi similique, dolor!</p>
</div>
<div class="row">
<div class="col-md-3 content--border">
<p>Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 Lorem ipsum 3 </p>
</div>
<div class="col-md-7">
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
it would be easier to make a div element and place it between them with absolute positioning, give the div a height and manipulate using its margin or the top left property and position it where you want, also encase it all in a div...
I want to add a shadow to a Bootstrap column, in order to create a thing similar to the image attached.
I need this shadow to overlap images, other divs backgrounds, and everything in general.
What I want :
And here is my code: https://codepen.io/alejandring/pen/oLKArO`
<div class="sidebar-logo">
<img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/sidebar-logo.png"></img>
</div>
<h1 id="titleh1">explore barcelona</h1>
<hr>
<div id="menu-wrapper">
<ul id="double">
<li>top ten</li>
<li>hotels</li>
<li>features</li>
<li>eat & drink</li>
</ul>
</div>
<div id="spotlight">
<div style="text-align:center;">
<p>Explore Spain</p>
<hr>
<p>Explore Europe</p>
</div>
</div>
</div>
<!--End Of Sidebar-->
<div id="main" class="col-sm-8">
<div class="row">
<div class="col-md-12" style="padding: 0px 0px 0px 0px;">
<div id="header">
<h1>La Sagrada Familia</h1>
<div class="menu">
<span id="map">FACTS</span>
<span id="facts">MAP</span>
</div>
</div>
</div>
</div>
<!--<div class="shadow"></div>-->
<!--Enf of Header-->
<div class="col-md-4">
<div class="weblist">
<div><span class="numbered">1</span></div>
<div><h2>Lorem ipsum dolor sit ametumque quos est harum architecto?</h2></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quia quam ullam dolore ut optio error voluptas aliquam dolorum vitae eos sint ea vel veritatis possimus iure perferendis molestiae est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ea, id officia atque placeat aut laudantium eveniet eius ex sequi impedit iste inventore sapiente veritatis rerum iure nesciunt facere autem!</p>
</div>
<div class="col-md-4">
<div class="weblist">
<div><span class="numbered">1</span></div>
<div><h2>Lorem ipsum dolor sit ametumque quos est harum architecto?</h2></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quia quam ullam dolore ut optio error voluptas aliquam dolorum vitae eos sint ea vel veritatis possimus iure perferendis molestiae est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ea, id officia atque placeat aut laudantium eveniet eius ex sequi impedit iste inventore sapiente veritatis rerum iure nesciunt facere autem!</p>
</div>
<div class="col-md-4">
<div class="weblist">
<div><span class="numbered">1</span></div>
<div><h2>Lorem ipsum dolor sit ametumque quos est harum architecto?</h2></div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, quia quam ullam dolore ut optio error voluptas aliquam dolorum vitae eos sint ea vel veritatis possimus iure perferendis molestiae est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, ea, id officia atque placeat aut laudantium eveniet eius ex sequi impedit iste inventore sapiente veritatis rerum iure nesciunt facere autem!</p>
</div>
<!--End Of WebList-->
<div class="row">
<div class="col-md-12" id="facts">
<h2>Facts</h2>
<div class="row">
<div class="col-md-6"><img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/imageholder.jpg" class="img-responsive"></div>
<div class="col-md-6">
<h3>Lorem ipsum dolor sit ametumque quos est harum architecto?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, tempora vel aliquid. Veritatis, perferendis, sapiente, in ratione nemo soluta suscipit dolor doloribus veniam ipsam molestias molestiae a quisquam amet temporibus.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Lorem ipsum dolor sit ametumque quos est harum architecto?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, tempora vel aliquid. Veritatis, perferendis, sapiente, in ratione nemo soluta suscipit dolor doloribus veniam ipsam molestias molestiae a quisquam amet temporibus.</p>
</div>
<div class="col-md-6"><img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/imageholder.jpg" class="img-responsive"></div>
</div>
<div class="row">
<div class="col-md-6"><img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/imageholder.jpg" class="img-responsive"></div>
<div class="col-md-6">
<h3>Lorem ipsum dolor sit ametumque quos est harum architecto?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, tempora vel aliquid. Veritatis, perferendis, sapiente, in ratione nemo soluta suscipit dolor doloribus veniam ipsam molestias molestiae a quisquam amet temporibus.</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<h3>Lorem ipsum dolor sit ametumque quos est harum architecto?</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, tempora vel aliquid. Veritatis, perferendis, sapiente, in ratione nemo soluta suscipit dolor doloribus veniam ipsam molestias molestiae a quisquam amet temporibus.</p>
</div>
<div class="col-md-6"><img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/imageholder.jpg" class="img-responsive"></div>
</div>
</div>
</div>
<!--Enf Of Fats-->
<div class="row" id="fast-facts">
<div class="col-md-9">
<div class="google-maps">
<iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBlsDqeDCPYRgIj1Dpbv_VbLf14wUw4E10
&q=La+Barceloneta,Barcelona+ES" width="551" height="376" frameborder="0" style="border:0"></iframe>
</div>
<!--End Of G-MAPS-->
</div>
<div class="col-md-3">
<h2>Fast Facts</h2>
<ul>
<li><span>Map and Address</span></li>
<li><span>Website</span></li>
<li><span>Online Tickets</span></li>
<li><span>Time Needed: 1 - 2 hours</span></li>
</ul>
<img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/sficon.jpg" class="img-responsive"></img>
</div>
<div class="col-md-12"><h3><span>►</span> Other Barcelona Top 10 Attractions Near La Sagrada Familia Are Marked In Yellow</h3></div>
</div>
<!--Enf Of Fast-Facts-->
<div class="row" id="visiting-tips">
<div class="col-md-12">
<h2>More Visiting Tips</h2>
<ul>
<li>Ensure you buy the entrance ticket and tower access online, the lines can get very long!</li>
<li>Don't reach before the time on your ticket, they won't let you earlier.</li>
<li>A small museum underneath tells the long history of building a basilica. Go if you have the time.</li>
<li>The towers have a great view across Barcelona.</li>
</ul>
</div>
</div>
<!--End Of Visiting Tips-->
<div class="row" id="related-links">
<div class="row">
<div class="col-md-12">
<h2>Related Links</h2>
</div>
</div>
<div class="row" style="padding-left:45px; padding-right:45px;">
<div class="col-md-3">
<img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/city.jpg" class="img-responsive"></img>
<h3>City</h3>
</div>
<div class="col-md-3">
<img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/fivestarshotel.jpg" class="img-responsive"></img>
<h3>Five Stars Hotels</h3>
</div>
<div class="col-md-3">
<img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/attractions.jpg" class="img-responsive"></img>
<h3>Attractions</h3>
</div>
<div class="col-md-3">
<img src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/zoos.jpg" class="img-responsive"></img>
<h3>Zoos</h3>
</div>
</div>
</div>
<!--End Of Related Links-->
<div class="row" id="reviews">
<div class="col-md-12">
<h2>Review And Feedback Of La Sagrada Familia</h2>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, neque, eligendi, suscipit, aut nisi laborum nostrum ad autem deserunt modi commodi ducimus libero fuga voluptate itaque accusamus officia voluptatem quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, vel, dicta saepe iusto aut suscipit voluptatum magnam maiores nulla molestiae odio rerum sapiente dolorum! In distinctio quae adipisci libero nobis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, officiis ipsum adipisci numquam temporibus quibusdam expedita esse animi? Cum, pariatur temporibus magnam sunt voluptates nihil facilis quas saepe? Quaerat, eum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, architecto beatae et asperiores eos sit quos perspiciatis numquam quod saepe natus labore quisquam vitae omnis laborum aut facere dolor at.</p>
</section>
</div>
</div>
<!--End Of Review-->
<div class="row" id="quick-links">
<div class="col-md-3">
<h2>Destinations</h2>
<ul>
<li>Barcelona</li>
<li>Madrid</li>
<li>Seville</li>
</ul>
</div>
<div class="col-md-3">
<h2>Top 10</h2>
<ul>
<li>Top 10 Things To Do in Barcelona</li>
<li>Top 10 Things To Do in Madrid</li>
<li>Top 10 Things To Do in Seville</li>
</ul>
</div>
<div class="col-md-3">
<h2>Eat & Drink</h2>
<ul>
<li>Barcelona Eat & Drinks</li>
<li>Madrid Eat & Drinks</li>
<li>Seville Eat & Drinks</li>
</ul>
</div>
<div class="col-md-3">
<h2>Hotels</h2>
<ul>
<li>Barcelona Hotels</li>
<li>Madrid Hotels</li>
<li>Seville Hotels</li>
</ul>
</div>
</div>
<!--End Of Quick-Links -->
<div class="row" id="footer">
<div class="col-md-2">
<img alt="PegNRope" src="https://peg-n-rope-alejandroarias.c9users.io/v1/images/logo.png" width="123px" height="33px">
</div>
<div class="col-md-7">
<ul>
<li>PEGNROPE</li>
<li>CONTACT US</li>
<li>PRIVACY</li>
</ul>
</div>
<div class="col-md-3"><p>PegNRope - Hotels, Experiences and Activities</p></div>
</div>
</div>
<!--End of Main Page-->
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>
</script>`
Add this style to your CSS file, and edit it as your need:
div#sidebar {
-webkit-box-shadow: 3px 3px 25px 4px rgba(0,0,0,0.5);
-moz-box-shadow: 3px 3px 25px 4px rgba(0,0,0,0.5);
box-shadow: 3px 3px 25px 4px rgba(0,0,0,0.5);
}