I have a bootstrap based template that outputs a text with a button and an image. By checkbox you can select here that the picture appears either to the right or to the left of the text.
Now I have the problem that the text and button always appears above or below the picture in the mobile viewport. But I want the text and button to always appear below the picture.
I just can not figure out how to customize the template. Since I can not read the viewport size with PHP, I can not think of anything but JavaScript. Or is there a better and easier way?
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Privatumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Büroumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Projektumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbelmontage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Mitarbeiterumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbellogistik</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
</body>
</html>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Privatumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="files/theme/img/demo-image-02.jpg" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Büroumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Projektumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbelmontage</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Mitarbeiterumzüge</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
</div>
</div>
</section>
<section id="leistungen" class="projects-section bg-light">
<div class="container">
<div class="row no-gutters mb-4 mb-lg-5">
<div class="col-xl-8 col-lg-12">
<img src="https://dummyimage.com/600x400/000/fff" width="700" height="500" alt="Blablabla" itemprop="image">
</div>
<div class="col-xl-4 col-lg-12">
<div class="featured-text">
<h4>Möbellogistik</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum voluptatibus facere recusandae perspiciatis, nobis voluptates, sed quod dolorum distinctio odit tempora exercitationem corporis magni at ea, sint, in ipsam doloremque!</p>
</div>
Anfrage stellen!
</div>
</div>
</div>
</section>
That's what it looks like on desktop:
And that's what it looks like on mobile. Here, I just want the text always to appear under the picture and not over it:
I have solved it with the bootstrap classes d-flex and flex-column-reverse.
$(window).resize(function(){
// add bootstrap flex classes to :even rows if viewport is smaller then 1200px, remove otherwise
if ($(window).width() < 1200){
$('.services-section:even .row').addClass('d-flex flex-column-reverse');
}else{
$('.services-section:even .row').removeClass('d-flex flex-column-reverse');
}
});
Related
I made a page on localhost using HTML CSS and Bootstrap and used flickity slider in it and is working fine on localhost, but as soon as i uploaded the same code on wordpress, the slider arrows(previous and next buttons) crosses each other. I think there is some error in the order of putting files.When uploaded to wordpress slider looks like this On localhost slider looks like this Here is the code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blog Post</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="/fontawesome-free-6.0.0-web/fontawesome-free-6.0.0-web/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<style>
#media(max-width : 576px) {
.pic {
margin-bottom: 30px;
}
}
#zoom-overflow {
display: inline-block;
width: 100%;
height: 100%;
overflow: hidden;
}
.transition {
box-shadow: 1px 1px 20px -14px rgba(0, 0, 0, 0.63);
transition-duration: 2s;
transition-property: box-shadow;
}
img:hover {
transform: scale(1.2);
overflow: hidden;
}
img {
transition: 1s;
overflow: hidden;
}
.row {
overflow: hidden;
}
.transition:hover {
box-shadow: 7px 10px 20px -14px rgba(0, 0, 0, 0.63);
cursor: pointer;
transition: all 1s;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.blog-title {
color: #EF0001;
margin-bottom: 0px;
}
.blog-heading {
font-size: larger;
font-weight: 500;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<p class="fs-1 mt-5">A home for inspiring stories <br>
on business and technology.</p>
</div>
<div class="row">
<p> <a href="#" class="fs-5" style="color: #EF0001; text-decoration:none"> SUBSCRIBE FOR UPDATES →
</a></p>
</div>
</div>
<div class="container my-5">
<div class="row my-5">
<div class="col-md-4 position-relative mb-sm-5 pic mb-md-0">
<span id="zoom-overflow"> <img src="images/card2.jpg"
style="object-fit: cover; width:100%; height: 100%;overflow: hidden;" alt="" class="pic"></span>
<p class=" position-absolute bottom-0 fs-4 text-light" style="left:5% ;">Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Vero, voluptates.</p>
</div>
<div class="col-md-8">
<div class="container p-0 d-flex-column">
<div class="row">
<div class="col-md-5 text-center"> <span id="zoom-overflow"> <img src="microsoft/m1.jpg"
style="width:100% ;" class="img-fluid" alt=""></span>
</div>
<div class="col-md-7 mt-3 d-md-flex-column flex-grow-1">
<div class="blog-title">BUSINESS</div>
<div class="container-fluid blog-heading p-0"> Collaboration announcement: Toyota Tsusho and
Yalantis
</div>
<div class="container-fluid p-0">
<small> Written by : XYZ</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 text-center mt-3"><span id="zoom-overflow"> <img src="microsoft/m1.jpg"
style="width:100% ;" class="img-fluid" alt=""></span>
</div>
<div class="col-md-7 mt-3 d-md-flex-column flex-grow-1">
<div class="blog-title">BUSINESS</div>
<div class="container-fluid blog-heading p-0"> Collaboration announcement: Toyota Tsusho and
Yalantis
</div>
<div class="container-fluid p-0">
<small> Written by : XYZ</small>
</div>
</div>
</div>
</div>
</div>
<div class="container fs-2 fw-bold mt-5">
IMPORTANT
</div>
</div>
<div class="container-fluid ">
<div class="row carousel mb-5" data-flickity='{"wrapAround" : true,"autoplay" : true,"pageDots":false, "prevNextButtons": true}'>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
<div class="col-md-3 p-5 carousel-cell transition m-3">
<div class="blog-title">BUSINESS </div>
<div class="blog-heading">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, aliquid!
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia dolorum laudantium exercitationem
eum,
quae
beatae autem ullam explicabo nemo perferendis consectetur modi. Repellat, alias quo amet enim
sapiente,
soluta dolores, possimus quos quae minima veritatis iste dolorum distinctio minus praesentium?
</div>
</div>
</div>
</div>
<div class="container fs-2 fw-bold mt-5">
LATEST
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 mt-3">
<span id="zoom-overflow"> <img src="images/card1.jpg" style="width:100% ; height:100% ;" alt=""></span>
</div>
<div class="col-md-8 mt-5">
<div class="blog-title">
BUSINESS
</div>
<div class="blog-heading">
Lorem ipsum dolor sit amet.
</div>
<div class="blog-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui quis, neque consequuntur earum a harum
dicta praesentium quam quaerat placeat, exercitationem ratione.
</div>
</div>
</div>
</div>
<div class="container mb-5">
<div class="row justify-content-center fs-5" style="color: #EF0001; text-decoration:none">SEE ALL ARTICLES
→</div>
</div>
<div class="container my-5">
<hr>
</div>
<div class="container">
<div class="row fs-2 fw-bold justify-content-center text-center">
Learn about business and technology from our <br> monthly newsletter!
</div>
</div>
<div class="container text-center mt-5"> <button type="button" class="btn"
style="background-color:#EF0001 ;">SUBSCRIBE</button></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
</body>
</html>
I started with bootstrap and try to create a row with 2 columns. The column right is split up into 2 rows. I try to use "space-around" to get a nicer layout for the column right (vertically), however, it does not work. The two rows are centered instead. Anyone knows why not? btw: the image itself is larger than the 2 rows in the right column.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="container-fluid px-0">
<div class="row">
<div class=" col-6">
<img class="img-fluid" src="pictures/Eriko.jpg" alt="">
</div>
<div class="col-6 bg-info">
<div class="row h-100 align-content-around">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-8 text-center bg-danger">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
<div class="row justify-content-center">
<div class="col-8 text-center bg-primary">
<h2> Achtergrondinformatie</h2>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis incidunt officia, beatae tempore quis, quam voluptatum fugit error velit voluptates non odio commodi, sunt consequatur hic at molestiae mollitia saepe. Soluta ab doloremque eaque quo, cumque
exercitationem corporis! Rem sequi modi, provident
</div>
</div>
</div>
</div>
</div>
</div>
</section>
screenshot of current result
I have a problem making my carousel animation work.
I want it to slide-out/slide-in as it does on the Bootstrap website, but in my case it doesn't slide-out, the old item just disappears and slide-in animation occurs.
I have attached a gif to explain what I mean.
Has anyone else experienced similar issues? Or is my code wrong?
<div class="container-fluid b2 pt-5 pb-5">
<div class="row text-center">
<h1>
Why Choose Us
</h1>
</div>
<div class="row justify-content-center">
<div class="col-4 centeralign">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis aspernatur consequuntur maiores sapiente placeat quis dolorem repellendus.</p>
</div>
</div>
<div id="carouselExampleIndicators" class="carousel slide d-lg-none" data-ride="carousel" data-slide="true">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner pb-5 pt-5">
<div class="carousel-item active">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconcheck.png" height="75px" width="75px" alt="">
<h3>Intuitive interface</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconfile.png" height="75px" width="75px" alt="">
<h3>Performance tracking</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row justify-content-center">
<div class="col-6 padelcarousel">
<img src="/styles/iconpuzzle.png" height="75px" width="75px" alt="">
<h3>High quality content</h2>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea ab hic nisi provident commodi eaque harum ut, distinctio cum. Aut quaerat eveniet asperiores unde dolor modi magni quod iste itaque?</p>
</div>
</div>
</div>
</div>
</div>
You Have Use The Bootstrap Starter Template And After I Think Solve This Problem
And Put Your Code After The Body Tag Than Solve This Problem
My agenda is to show an image and Details side by side in laptop and in responsive show them individually.. It works in non-responsive page showing the details side by side with col-md-6, but the code doesnt accept col-sm-12 for showing the details induvidually in responsive state
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="col-img" src="reference/about-us/choice.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Use img-fluid to image(see Fiddle:https://jsfiddle.net/gpLyvr5w/6/)
Learn here:https://getbootstrap.com/docs/4.0/content/images/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
well the code class="col-md-6 col-sm-12 padding-0" means that at screen ≥576px the element should take full width (aka width:100%) of available width but if the screen is ≥768px then the element should take half the available width (aka width:50%).
So if you need your div containing image and div with details to be side by side on screens ≥768px (usually tablets in portrait mode) then simply use col-md-6 you don't need to specify col-sm-12 as by default div elements are block level elements and take full width of available space.
Also you don't need padding-0 class you can use Bootstrap 4's spacing classes such as p-0, p-1, p-3, pt-1, py-3 etc. to remove or add padding so your final classes should look like this:
class="col-md-6 p-0"
You Need to give the extra class in first col-md-6 i have given class name res and write a media query for that like these
<style>
#media only screen and (min-device-width : 320px) and (max-device-width : 480px)
{
.res{
min-width:100%;
}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section id="about-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-12 padding-0 res">
<img class="img-fluid" src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="color choices">
</div>
<div class="col-md-6 col-sm-12 padding-0">
<div class="col-details">
<div class="col-details-title">
ABOUT US
</div>
<div class="col-details-subtext">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime eius, itaque odio vel fugiat sit minima illum doloremque qui esse. Minima veniam soluta numquam mollitia vel aspernatur, nobis maxime in!
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis amet, alias nam! Cooris doloremque tempora sed facilis eveniet, quis voluptas quaerat accusamus tenetur, laborum debitis consequuntur ad facere beatae. Enim.
</div>
<div>
<button style="margin-left: 250px; margin-top: 50px;">View More</button>
</div>
</div>
</div>
</div>
</div>
</section>
Hi All i have Solved this issue.. had MISSED OUT WITH THE META TAG IN HEADER
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);
}