I am learning boot strap to build my own page. Here is the snippet.
The HTML file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
<title>Title of the document</title>
</head>
<body>
<!-- container-fluid is taking of the padding towards the end, lets go with just the container. -->
<div class="container">
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"><img id="photo" src="tom-cruise.jpg" alt="Pavan Dittakavi"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12">HELLO,
MY NAME IS KAMIL24YO AND THIS IS MY RESUME/CV</div>
</div>
<div id="seperator"></div>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
<div class="row">
<div class="my_header">
//EDUCATION
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
<!-- -->
</div>
</div>
</div>
<br/>
<div class="row">
<div class="col-lg-7">
<div class="row">
<div class="my_header">
//ABOUT ME2
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
</div>
</div>
<div class="col-lg-5">
<div class="row">
<!-- -->
<div class="my_header">
//ABOUT ME
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, non, dolorem, cumque distinctio magni quam expedita velit laborum sunt amet facere tempora ut fuga aliquam ad asperiores voluptatem dolorum! Quasi.
</p>
<!-- -->
</div>
</div>
</div>
</div>
</body>
</html>
Here is the CSS file:
#photo {
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height: 150px;
border-radius: 50%;
border:3px solid #021a40;
}
#seperator {
border-top: double;
color: #ededed;
}
.my_header {
color: #EC7263;
font-size: 1.8em;
font-weight: 700;
text-transform: uppercase;
}
body {
font-family: 'Open Sans', Arial, Tahoma;
}
.shape{
text-align:left;
background-color:rgba(3,78,136,0.7);
width:200px;
height:60px;
line-height:60px;
color:white;
margin:20px auto;
position:relative;
}
What I have noticed is that col-lg-7 and col-lg-5 or for that matter col-lg-2 and col-lg-10 are not rendered as columns in Bootstrap. Can you please let me know where I am missing - I have a feeling that the div ordering or usage of rows and containers is missing something.
As a side note, I also see that on Chrome the distortion is more - the columns are not getting rendered at all, but on Firefox it renders to some extent - for example the first few columns.
Edit: My problem now is that I am trying to build a clone for http://kamsolutions.pl/projects/resume/ and in my implementation, I see that the resulting HTML file has columns and rows mixed up and not getting rendered as expected. Here is the picture that I am referring to.
Thanks,
Pavan.
You have a row, within which you have two columns, col-lg-7 and col-lg-5. Within the col-lg-7 you have two additional rows, whereas within the col-lg-5 you only have one row. That's where your blank space is coming from.
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'm currently facing trouble when making layout. In the below picture, i want to make the content columns on the right ( title,lorem...) scale to fit height of the image on the left. How can I do it?
I'm using Bootstrap v5.1.1
Current image:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="col-md-4 black h-100">
<img src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="" style="width:300px;">
</div>
</div>
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
Use Bootstrap's flex grid (which is the default) rather than setting column sizes.
Use the col-auto class on your image column to make it collapse to the image's width.
Don't set inline sizing on your grid or your content. Inline styles make development and maintenance more difficult. Use a class for your image if you like, with a semantic name so you can change the size value for a redesign without the name becoming wrong.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<style>
.size-medium {
width: 200px;
}
</style>
<div class="container">
<div class="row">
<div class="col col-auto">
<div class="col-md-4 black h-100">
<img class="size-medium" src="https://via.placeholder.com/300" alt="">
</div>
</div>
<div class="col">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
</div>
you put the class col-md-4 to the wrong tag
<div class="row">
<img class="col-md-4 p-0" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/domestic-cat-lies-in-a-basket-with-a-knitted-royalty-free-image-1592337336.jpg" alt="">
<div class="col-8">
<h1>Title </h1>
<h6>Content</h6>
<p>Date:june 23 2021</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos assumenda odio impedit, nobis, delectus suscipit nam atque sint maxime voluptates molestias dignissimos blanditiis numquam aperiam asperiores dolorem ad veniam. Vel.
<br>Read more
</div>
</div>
I have two divs, I want one to the left and the other to the right (like this).
I've tried self-align-start and self-align-end in each column, but it didn't result in what I want. I also put the class row-cols-1 (not in the screenshot).
What am I missing? Here's my code:
.about-me {
max-width: 300px;
}
.current-work {
max-width: 300px;
}
<body>
<section id="about" class="container-fluid">
<div class="row row-cols-1 justify-content-between">
<div class="about-me col-6">
<h2> About Me </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
</div>
<div class="current-work col-6">
<h2> What I'm Doing </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>
</div>
</section>
</body>
And here's the result
You can try offset-3 in the second div class attribute.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?t amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
</div>
</div>
<div class="col-9 offset-3 text-end">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident. Soluta magni quo incidunt ducimus tempora nisi?</p>
</div>
</div>
</div>
</div>
</body>
</html>
You can use .me-auto & .text-start for left aligned, and use .ms-auto & .text-end for right aligned.
:root {
--heavy-red-border: 1em solid red;
}
.red-border-start {
border-left: var(--heavy-red-border);
}
.red-border-end {
border-right: var(--heavy-red-border);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9 me-auto text-start red-border-start">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.</p>
</div>
</div>
<div class="col-9 ms-auto text-end red-border-end">
<div class="item">
<h1>ABOUT ME</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat incidunt odit, amet cupiditate sint aliquid possimus ut? Aliquam, repellat sit expedita suscipit quaerat harum nesciunt molestiae iure, nobis quae earum deleniti odio provident.
Soluta magni quo incidunt ducimus tempora nisi?</p>
</div>
</div>
</div>
</div>
</body>
</html>
This question already has an answer here:
Why is a flex item limited to parent size?
(1 answer)
Closed 1 year ago.
I was trying to make a scrollable(in X direction) flexbox container to display cards but as the number of cards increase the width of cards decrease but I want the cards to be of equal width even though it overflows the body. I tried this also Full width flex items but didn't worked please help me
boyd{
overflow:hidden}
.container {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: scroll;
width: 100%;
}
.container .card {
padding: 10px;
border: 0.3px solid rgba(219, 214, 214, 0.801);
border-radius: 5px;
box-shadow: 1px 4px 8px 0px rgba(219, 214, 214, 0.801);
width: 18rem;
}
.card-head {
text-align: center;
}
.cardimg img {
width: 95%;
}
<!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>Practice Website</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
<div class="card">
<div class="cardimg">
<img src="https://www.bayleafdigital.com/wp-content/uploads/2018/11/5-reasons-demo-software.jpg" alt="card image">
</div>
<div class="card-head">
Lorem ipsum dolor sit amet.
</div>
<div class="card-body">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil perferendis animi omnis eligendi ipsum maiores, rerum dolorum reiciendis quia ullam repellat praesentium nulla, at corrupti eveniet dignissimos culpa impedit voluptate?
</div>
</div>
</div>
<div class="mainbody">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque delectus excepturi quas, placeat voluptatibus quam similique magni in dicta eligendi ratione, amet quaerat debitis quo ipsum quasi. Numquam, eos veritatis?50
</div>
</body>
</html>
Try this:
.container .card {
flex-shrink: 0;
/* ... */
}
flex-shrink docs: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink
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