Look at the screen below (I'm using Bootstrap):
Adding a padding can solve this problem but it is not responsive for mobile devices. Is there a better way to this?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 bg-primary text-white ">
<h1>header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-6 ">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-6 bg-primary text-white ">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-6">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus ex plicabo.20
</p>
</div>
</div>
</div>
</section>
Check below upsated html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-md-offset-3 bg-primary"></div>
<div class="col-md-3 bg-primary text-white ">
<h1>header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-3">
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
<section>
<div class="container-fluid">
<div class="row">
<div class="col-md-3 col-md-offset-3"></div>
<div class="col-md-3 bg-primary text-white ">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus explicabo.20</p>
</div>
<div class="col-md-3">
<h1>Header 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro laboriosam est obcaecati veniam optio natus officiis tempora eum odit, cum dolores similique inventore neque? Error id eligendi ducimus, natus ex plicabo.20
</p>
</div>
<div class="col-md-3"></div>
</div>
</div>
</section>
Related
I am using Bootstrap 5 row property to make my website responsive. However, when I try to add 2 divs next to each other, they don't seem to align at the very center of the webpage, instead, there is quite an unused gap at the right that I can't get rid of. For this section I am using class="container". Any tips? Code below. I also added an image of how it looks when I inspect.
<h1> (SPH) </h1>
<div class="row">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
As mentioned in the comments.
You can use a class at the top of your page like : container.
Example:
<div class= container justify-content-center> /your code here/ </div>
The other answer has a few semantic issues so I'd figured I post one. Essentially, you should nest your Bootstrap row into a container. Then you can add justify-content-center on the row because it has a display: flex; by default.
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<div class="container">
<h1 class="text-center"> (SPH) </h1>
<div class="row justify-content-center">
<div class="box col-lg-6">
<h3> Who We Are </h3>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus fuga repellendus minima maiores beatae unde odit eius in sint optio. Ipsum optio neque beatae quod necessitatibus dolor iste quae voluptatibus. </p>
</div>
<div class="box col-lg-6">
<h3> What We Do </h3>
<p> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam saepe illum dolores corporis suscipit enim at non temporibus perspiciatis corrupti dicta pariatur, veritatis beatae error doloremque voluptates. Eius, eveniet accusantium. </p>
</div>
</div>
</div>
I have a problem with aligning all the containers in the given example. I would like them to adapt to the height of the largest container.
I have already tried several dozen ways and nothing h-100 helps, unfortunately.
I am giving you a link to the example as it is supposed to look like and it looks like a design designed by a graphic designer - https://prnt.sc/vnwn38
.comment__container{
background-color: #eee;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12">
<div class="comment__header text-center">
<h2>Komu pomogłam</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="row">
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis,</p>
</div>
<div class="comment__container-author text-right">
<p>- Joanna</p>
</div>
</div>
</div>
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis,Autem corporis, Autem corporis, Autem corporis,</p>
</div>
<div class="comment__container-author text-right">
<p>- Martyna</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="row">
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.</p>
</div>
<div class="comment__container-author text-right">
<p>- Aleksandra</p>
</div>
</div>
</div>
<div class="col-12">
<div class="comment__container">
<div class="comment__container-text">
<p>Bardzo miły i profesjonalny kontakt. Dziękuję bardzo Pani Ewo za pomoc! Polecam! </p>
</div>
<div class="comment__container-author text-right">
<p>- Monika</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="comment__container">
<div class="comment__container-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit, rerum, impedit. Nihil, corrupti. Enim, voluptatibus, omnis. Enim tempore atque aperiam perspiciatis placeat? Autem corporis, beatae iure! Voluptates quam numquam nam corporis laborum provident aperiam, minus exercitationem dolorum, dolorem error amet, suscipit minima porro voluptate nesciunt a sed sequi fugit, rem.</p>
</div>
<div class="comment__container-author text-right">
<p>- tata Łukasz</p>
</div>
</div>
</div>
</div>
</div>
I am trying to layout a grid in bootstrap that consists on the desktop of a full 12 column layout, inside that, there is a 8 column grid and a 4 column grid. the 8 column grid is filled with an image/text, the 4 column grid consists in its own of 2 elements below each other containting image/text.
on smaller breakpoint the layout should simply show 3 elements in same size below each other.
I fiddled around but I do not get it to work. Below you also find next to the html a sketch from what I am trying to achieve. Any hints? I do not feel this is possible out of the box with bootstrap 4.
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-md-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo
ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate
sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi
porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio
doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
</div>
</div>
</section>
As a sketch it looks like this:
You need to specify the smaller col width. You also had an extra unnecessary row and col wrapping it. Below is a working example of what you are looking for. col-12 class was added for any screen smaller than md
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-12 col-md-8">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
<div class="col-12 col-md-4">
<div class="row">
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
<div class="col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illo ratione blanditiis tempore tempora non. Neque adipisci maxime aspernatur voluptate sunt non totam, temporibus provident necessitatibus distinctio impedit nobis aut at!
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui illo eaque libero, modi porro iusto magni sint laboriosam eius. Fugiat non ad pariatur sit libero optio doloremque molestiae harum! Rem!</p>
</div>
</div>
</div>
Please try this snippet.
.row {
margin: 20px 0;
}
.col .card {
height: calc(100% - 10px);
}
.card{
margin-bottom: 10px;
}
.card img {
width: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col col-sm">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://source.unsplash.com/random/300x150" alt="Image">
<div class="card-body">
<p>Some text Some text goes here Some text goes here Some text goes here</p>
</div>
</div>
</div>
</div>
</div>
I have two columns (one with is-half class) that I want to "stack" (one on top of each other) on mobile AND tablet mode.
As from the documentation I have used <div class="columns is-desktop"></div>
But it is not working properly.. On tablet, columns are stacked but the first column, which has a is-half class, remains half sized.
Here's a snippet to illustrate the issue:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.css" rel="stylesheet"/>
<div class="container">
<div class="columns is-desktop">
<div class="column is-half">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
Or a JSFiddle Example
I want the is-half column to be fullwidth on tablet mode.
It is not a bug. That's the expected behaviour.
<div class="columns is-desktop"></div>
has display: block until desktop
#media screen and (min-width:1024px){.columns.is-desktop{display:-webkit-box;display:-ms-flexbox;display:flex}}
.is-half has width: 50%
.column.is-half,.column.is-half-tablet{-webkit-box-flex:0;-ms-flex:none;flex:none;width:50%}
It's like
div {
border: 1px solid;
}
.half {
width: 50%;
}
<div class="half">half</div>
<div>fullwidth</div>
between 768px and 1024px.
Solution
(Don't set .is-half)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
<div class="columns is-desktop">
<div class="column">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
If you want to have other sizes, e.g. for desktop, use .is-x-desktop
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.1/css/bulma.min.css">
<div class="container">
<div class="columns is-desktop">
<div class="column is-8-desktop">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
Change Class Name is-half to is-half-desktop
<div class="container">
<div class="columns is-desktop">
<div class="column is-half-desktop">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eligendi nostrum voluptatum porro maiores animi dignissimos amet consectetur cumque sapiente eos, explicabo, accusamus modi mollitia labore corporis inventore eveniet esse quam?
</div>
<div class="column is-half-desktop">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto alias necessitatibus doloremque magni minima nobis facere, quibusdam autem eveniet voluptatum amet explicabo voluptates, laudantium praesentium? Ab repellat eius doloremque labore.
</div>
</div>
</div>
https://jsfiddle.net/wtprmwsh/2/
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);
}