Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 10 months ago.
Improve this question
I am working on creating an affiliate website in blogger.com. i need a layout which resembles this.
for your ease, https://www.technikkss.com/ this is the website i am referring to.
How can i recreate easily?, i have no knowledge of html or css. if there is any such theme/layout is available for free. please let me know.
PS: I searched with keyworks like affiliate marketing template, grid template for blogger yet the results i found are not satisfying my requirement.
Thanks in advance.
I would use for it flexbox system. Like that:
.w {
margin: 0 auto;
background-color: gray;
display: flex;
width: 900px;
gap: 10px;
padding: 10px;
}
.card {
width: 300px;
background-color: white;
border: 1px solid #000;
box-sizing: border-box;
padding: 10px;
}
.card img {
width: 100%;
}
h4 {
color: lightgray;
}
.card button {
background-color: blue;
color: white;
width: 100%;
border: none;
padding:5px;
}
<div class="w">
<div class="card">
<img src="https://via.placeholder.com/300px">
<h3>Title</h3>
<h4>Sub title</h4>
<button class="buy">Buy</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/300px">
<h3>Title</h3>
<h4>Sub title</h4>
<button class="buy">Buy</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/300px">
<h3>Title</h3>
<h4>Sub title</h4>
<button class="buy">Buy</button>
</div>
<div class="card">
<img src="https://via.placeholder.com/300px">
<h3>Title</h3>
<h4>Sub title</h4>
<button class="buy">Buy</button>
</div>
</div>
You should share some code, however if i understood you correctly this is a basic idea of what you need using bootstrap 5
Update
I just realized that this was not displaying properly in the snippet preview. So i have made it responsive!
View in full page to get an idea of what it would look like!
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap shop</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.0.2 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h2 class="text-center mb-5">My Blogger Shop</h2>
<div class="container mx-auto mt-2">
<div class="row text-center">
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div>
<div class="row mt-3 text-center">
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
<div class="card mx-2 mt-2 col" style="width: 18rem;">
<img src="https://placebear.com/640/360" class="card-img-top" alt="">
<div class="card-body">
<p class="card-text">Mens Watch <br> March 20, 2022</p>
<button class="btn btn-primary">Buy Now</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</body>
</html>
I'm using bootstrap and when I'm switching to small devices my content gets overlapped by the next div. I tried to change everything and put margin on my bottom of my div but nothing seems to work. I'm missing something. I'm not sure if it something with the relative potitions I tried to add so I can add my svgs in the bottom of each div.
The HTML
<div class="container-fluid vh-100 " id="projects">
<!-- <div class="container d-flex h-100 " id="pwrap"> -->
<div class="row align-items-center mx-auto " id="cards">
<div class="col-sm-6 col-lg-4 ">
<div class="card" >
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class=" col-sm-6 col-lg-4 ">
<div class="card" >
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4 ">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
<svg class="botp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#FFB9B9" fill-opacity="1" d="M0,192L48,165.3C96,139,192,85,288,96C384,107,480,181,576,218.7C672,256,768,256,864,245.3C960,235,1056,213,1152,218.7C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
<!-- </div> -->
</div>
<!-- /projects -->
<!-- contact -->
<div class="container-fluid w-100 vh-100 my-auto d-flex justify-content-center align-items-center " id="contact">
<!--Section: Contact v.2-->
<div id="border-shadow">
<div class="border border-success p-3" id="bordercustom">
<section class="mb-4 " id="formcustom">
<!--Section heading-->
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact Me</h2>
<div class="row justify-content-center">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Your name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Your email</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left d-flex justify-content-center">
<a class="button mt-3" onclick="validateForm();">
<span class="default">Send</span>
<span class="success">Sent</span>
<div class="left"></div>
<div class="right"></div>
</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
</div>
</div>
</section>
<!--Section: Contact v.2-->
</div>
<svg class="botc"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#363C62" fill-opacity="1" d="M0,288L60,272C120,256,240,224,360,224C480,224,600,256,720,277.3C840,299,960,309,1080,293.3C1200,277,1320,235,1380,213.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path></svg>
</div>
<!-- /contact -->
and my css
#home,
#about,
#projects,
#contact{
position: relative;
}
#projects .botp{
z-index: 1;
position: absolute;
bottom: 0;
left:0;
}
#cards{
z-index: 2;
}
#contact .botc{
position: absolute;
bottom: 0;
left:0;
}
What browser are you using? I've run your code, and it's not overlapping (I'm using Opera/Google Chrome).
Also, you can add height: auto to the divisions div, it may help :)
EDIT:
(I finally got what you mean)
Just play with the z-index. Here is the code:
CSS
#home,
#about,
#projects,
#contact {
position: relative;
}
#projects .botp {
z-index: 1;
bottom: 0;
left: 0;
position: absolute;
}
#contact {
z-index: 10;
}
#projects {
z-index: 10;
}
.botc{
position: absolute;
z-index: 1;
left: 0;
bottom: 200px;
}
#card-text {
z-index: 10000;
}
.botp {
position: absolute;
z-index: 1;
left: 0;
bottom: 500px;
z-index: 1;
}
.col-md-6 {
z-index: 10;
}
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container-fluid vh-100 " id="projects">
<!-- <div class="container d-flex h-100 " id="pwrap"> -->
<div class="row align-items-center mx-auto " id="cards">
<div class="col-sm-6 col-lg-4 ">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-6 col-lg-4">
<div class="card">
<img src="pics/project1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" style="z-index: 10;">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
<svg class="botp" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#FFB9B9" fill-opacity="1"
d="M0,192L48,165.3C96,139,192,85,288,96C384,107,480,181,576,218.7C672,256,768,256,864,245.3C960,235,1056,213,1152,218.7C1248,224,1344,256,1392,272L1440,288L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
<!-- </div> -->
<!-- /projects -->
<!-- contact -->
<div class="container-fluid w-100 vh-100 my-auto d-flex justify-content-center align-items-center " id="contact">
<!--Section: Contact v.2-->
<div id="border-shadow">
<div class="border border-success p-3" id="bordercustom">
<section class="mb-4 " id="formcustom">
<!--Section heading-->
<h2 class="h1-responsive font-weight-bold text-center my-4">Contact Me</h2>
<div class="row justify-content-center">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Your name</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Your email</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Subject</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message" name="message" rows="2"
class="form-control md-textarea"></textarea>
<label for="message">Your message</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left d-flex justify-content-center">
<a class="button mt-3" onclick="validateForm();">
<span class="default">Send</span>
<span class="success">Sent</span>
<div class="left"></div>
<div class="right"></div>
</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
</div>
</div>
</section>
<!--Section: Contact v.2-->
</div>
</div>
<!-- /contact -->
<svg class="botc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#363C62" fill-opacity="1"
d="M0,288L60,272C120,256,240,224,360,224C480,224,600,256,720,277.3C840,299,960,309,1080,293.3C1200,277,1320,235,1380,213.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z">
</path>
</svg>
</body>
</html>
Hope this helps :)
so i randomly fixed it just by adding this code on css
.card-img-top {
width: 100%;
height: 15vw;
object-fit: cover;
}
I want to create a web page with html and bootstrap 4 and I'm having trouble arranging my page following this template.
<!doctype html>
<html lang="en">
<head>
<title>Hepatrote with Bootstrap v4</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<!-- How to arrange these elements: left side : Symptoms with text and button 'How to protect yourself ?'
; rgiht side : Image of disease -->
<!-- How to arrange these elements: Symptoms with text and 4 bootstrap cards With this arrangement-->
<div class="row row-cols-1 row-cols-md-3 mb-3 text-center">
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
In my code, you can see the based structure : head,body and I also added bootstrap link. My problem is to arrange the elements as shown in the picture.
Does anyone have an idea?
Here is basic stracture of your image using bootstrap 4, this is not responsive so you need to some work for responsive.
Code:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<div class="row">
<div class="col">
<h1>Symptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</div>
<div class="col">
<h1>Image of dieses</h1>
</div>
</div>
<div class="row">
<div class="col-12">
<h1 class="text-center">Syptoms</h1>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs.</p>
</div>
<div class="row">
<div class="col-6 ">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="w-50 d-inline-block" >
<h5>Image1</h5>
</div>
<div class="w-50 d-inline-block">
<h5>Sympt1</h5>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
</footer>
</main>
</body>
</html>
`
main {
width:90%;
}
#maincss {
position: relative;
height: 100%;
width:100%;
margin:auto;
}
#maincol {
position: relative;
padding: 1rem;
margin:auto;
}
#mainimg {
position:relative;
max-width:100%;
}
#3rdcss {
position: relative;
min-height: 100%;
}
img {
position:relative;
width:100%;
}
#3rdcol {
position: relative;
min-height: 100%;
margin: auto;
}
#cardzcol {
position:relative;
margin:auto;
padding:0.5rem;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Hepatrote with Bootstrap v4</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<header class="d-flex justify-content-between flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
<p class="h5 my-0 me-md-auto fw-normal">Hepatrote</p>
<nav class="my-2 my-md-0 me-md-3">
<a class="p-2 text-dark" href="#">Accueil</a>
<a class="p-2 text-dark" href="#">Blog</a>
<a class="p-2 text-dark" href="#">Symptoms</a>
<a class="p-2 text-dark" href="#">Contacts</a>
</nav>
</header>
<main class="container">
<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
<div id="maincss" class="row">
<div id="maincol" class="col-6">
<h2>Title</h2>
<p>text relative</p>
<input type="button" class="btn btn-primary" value="button" />
</div>
<div id="maincol" class="col-6 ">
<div id="mainimg"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div></div>
<div id="maincol" class="col-12 ">
<div id="3rdcss" class="row ">
<div id="3rdttl" class="col-12 ">
<h2>Title</h2>
<p>some more text to be shown</p>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-1]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-2]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-3]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
<div id="cardzcol" class="col-6 ">
<div id="cardz" class="card">
<div class="card-body">
<div id="cardrw" class="row">
<div id="crdimgcol" class="col-6"><img src="https://tmladenov.tech/images/img-test.png" title="img" /></div>
<div id="crdtxtcol" class="col-6">
<h5 class="card-title">[card-4]</h5>
<p class="card-text">some text here</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="pt-4 my-md-5 pt-md-5 border-top">
[footer]
</footer>
</main>
</body>
</html>
hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>
If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.
I would float the divs to the left with some padding and use clearfix if needed.
All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach
I have a card in which there is button (Start button) which won't go to the center of the card.
I tried center-align class, but that won't do it. I also tried using my id and class and trying text-align: center; in my css. But that did not work either.
Don't know what I'm missing.
Here is what I have:
This is what I want:
Here is the full html:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
Here is the full css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232,232,232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a{
color:#00ACC1;
}
.tabs .tab a:hover,.tabs .tab a.active {
background-color:transparent;
color:#00ACC1;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
color:rgba(102,147,153,0.7);
}
.tabs .indicator {
background-color:#00ACC1;
}
.naslovPrijava{
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik{
font-size: 18px !important;
text-align: left;
margin-left:-15px;
margin-top: -15px;
}
.pomeriKarticu{
margin-left:-35px;
height: 50px;
}
.dugmeStart{
text-align: center;
}
You have to use the center-align class on a parent element of the button, so I added a parent with class="center-align"
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background-color: rgb(232, 232, 232);
}
main {
flex: 1 0 auto;
}
.tabs .tab a {
color: #00ACC1;
}
.tabs .tab a:hover,
.tabs .tab a.active {
background-color: transparent;
color: #00ACC1;
}
.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
color: rgba(102, 147, 153, 0.7);
}
.tabs .indicator {
background-color: #00ACC1;
}
.naslovPrijava {
font-size: 20px !important;
text-align: center;
height: 18px;
}
.naslovUcesnik {
font-size: 18px !important;
text-align: left;
margin-left: -15px;
margin-top: -15px;
}
.pomeriKarticu {
margin-left: -35px;
height: 50px;
}
.dugmeStart {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--navbar-->
<header>
<nav>
<div class="nav-wrapper light-blue darken-3">
Kviz
<!--
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>test</li>
</ul>
-->
</div>
</nav>
</header>
<main>
<div class="row">
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="card-image waves-effect waves-block waves-light">
<img class="activator" src="images/kvizslika.jpg">
</div>
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Kako se radi kviz ?
<a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
</span>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
<div class="card-tabs">
<ul class="tabs tabs-fixed-width">
<li class="tab"><a class="active" href="#korak1">Poeni</a></li>
<li class="tab">Odgovori</li>
<li class="tab">Vreme</li>
</ul>
</div>
<div class="card-content grey lighten-4">
<div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
<div id="korak2">Test 2</div>
<div id="korak3">Test 3</div>
</div>
</div>
</div>
</div>
<div class="col s12 m12 l6 xl6">
<div class="card">
<div class="row">
<div class="col s12 m12">
<div class="card light-blue darken-3">
<div class="card-content white-text">
<span class="card-title naslovPrijava">Prijava</span>
</div>
</div>
</div>
<div class="col s12 m12">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 1:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name" type="text" class="validate">
<label for="first_name">Ime</label>
</div>
<div class="input-field">
<input id="last_name" type="text" class="validate">
<label for="last_name">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 2:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name2" type="text" class="validate">
<label for="first_name2">Ime</label>
</div>
<div class="input-field">
<input id="last_name2" type="text" class="validate">
<label for="last_name2">Prezime</label>
</div>
</form>
</div>
</div>
</div>
<div class="col s6 m6">
<div class="card">
<div class="card-content">
<div class="row">
<div class="col s6 m6">
<div class="card pomeriKarticu light-blue darken-3 center">
<div class="card-content white-text">
<span class="card-title naslovUcesnik">Učesnik 3:</span>
</div>
</div>
</div>
</div>
<form>
<div class="input-field">
<input id="first_name3" type="text" class="validate">
<label for="first_name3">Ime</label>
</div>
<div class="input-field">
<input id="last_name3" type="text" class="validate">
<label for="last_name3">Prezime</label>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="center-align">
<button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer light-blue darken-4">
<div class="footer-copyright">
<div class="container">
<center> © 2017 VTŠ Apps Team </center>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
You can use margin to achieve this also
.dugmeStart {
text-align: center;
display: block;/**Added This**/
margin: 0 auto; /**Added This**/
}