I am trying to build the following layout with bootstrap 4, I would like 2 bigger columns on the left and then 4 grouped together on the right but their height togetehr cannot exceed the heigth of the first 2.
Except I just cant get it to work.
This is what I want:
This is basically what I got:
https://codepen.io/anon/pen/ZrBpze
<section id="mu-featured">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
<div class="col-md-4 col-sm-6">
<img src="img/picture.jpg" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur. Call to action!</p>
</div>
</div>
</div>
</section>
You didn't specify how they should behave on smaller screens, but to answer your question: You need to nest the right-most items like shown in the code below.
In other words, what you are looking to do is called "nesting". Not ordering.
To nest, you put a .row into a column and then put at least one other col-* inside that nested row (the second code snippet further down below produces a slightly different result):
<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>
<section id="mu-featured">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero rem accusamus voluptatibus, nihil
unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-12">
<img src="https://placehold.it/85" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero. Call to action!</p>
</div>
<div class="col-12">
<img src="https://placehold.it/85" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero. Call to action!</p>
</div>
<div class="col-12">
<img src="https://placehold.it/85" alt="" style="height: 85px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Illo suscipit facilis ipsum ullam reiciendis odio error
iste neque ratione libero. Call to action!</p>
</div>
</div>
</div>
</div>
</div>
</section>
And here's another version that produces a slightly different result (click the "run code snippet" button below and expand to full page):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section id="mu-featured">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-6">
<img src="https://placehold.it/235" alt="" style="height: 235px">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo suscipit facilis ipsum ullam reiciendis odio error iste neque ratione libero rem accusamus voluptatibus, nihil unde maiores sunt nisi. Assumenda, consectetur.
</p>
Call to action!
</div>
<div class="col-md-4 col-sm-12">
<div class="row">
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
<div class="w-100"></div>
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
<div class="w-100"></div>
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
<div class="w-100"></div>
<div class="col-auto">
<img src="https://placehold.it/85" alt="" style="height: 85px">
</div>
<div class="col">
<h1>Header</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br> Call to action!</p>
</div>
</div>
</div>
</div>
</div>
</section>
In that second code snippet, the small images and their text content are separated in 2 different columns and <div class="w-100"></div> is used as a separator for small screens. w-100 means "width:100%".
Related
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;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
The 4 divs have a width of 23% and are displayed inline-block, they have a height of 220px and margin 0. The issue is that they are not horizontally aligned
I tried to change the height and width already and removed the margin but that does not fix it.
It looks like this...
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
Give vertical-align:top; to .aside-column class.
.aside-column {
width: 23%;
display: inline-block;
height: 220px;
margin: 0;
vertical-align:top;
}
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
You can also use a parent container which is a flexbox.
.container {
display: flex;
}
.aside-column {
width: 23%;
height: 220px;
margin: 1%;
}
<div class="container">
<div class="aside-column aside-column1">
<h4>Lufthansa vs Airbus</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, exercitationem nulla? Ea rerum necessitatibus ratione optio iure. Aliquid?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column2">
<h4>Bill Gates History</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero in labore assumenda tempora nostrum nisi possimus saepe dolor incidunt voluptatem, iure cum atque!</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column3">
<h4>Tescos Stabbing</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed quis quaerat quo reprehenderit?</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
<div class="aside-column aside-column4">
<h4>Amazon Forest Fire</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur aliquid sint tenetur.</p>
<div class="aside-readMore">
Continue Reading
</div>
</div>
</div>
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 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);
}
I'm creating my first website, using Twitter Bootstrap 3.
I want to create a feedback section using thumbnails.
What I need is to vertical-align social buttons in the bottom of each thumbnail no matter of thumbnail's height.
Here is my HTML code:
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail vertical-container">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
<div class="vertical-container1">
<p>VK Instagram</p>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
<div class="caption">
<h3>Lorem Ipsum!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
<p>VK Instagram</p>
</div>
</div>
</div>
</div>!
How it looks now:
You can do this by positioning divs. Assign position relative to the container div. in your case col-md-4 but as it's a bootstrap class you have to give it other class name and assign position relative to it.
And position of the div containing buttons. (in your case vertical-container1) to position absolute
parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
You could set a minimum height for your text area using a custom class;
<p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>
.min-height {
min-height:100px;
}
this will ensure all the text area's are the same height even if there is not enough text to push the buttons down.
An Exmaple
of course this could go the other way and end up having too much text in which case you'll want to add a maximum height thus;
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...
.max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
you try code before:
.thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}