So i have this card, i am not sure how to pace items in it the way i want. In the html code i have used bootstrap-3. Css is just noob basic pixels movement.
<body>
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<br />
.front {
display: flex;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<div>
<img class="girlimg" src="https://picsum.photos/250/150" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>
This just uses flexbox, which is incredibly useful. If you want to learn more CSS-Tricks has a good article: A Complete Guide to Flexbox
Related
I have been trying to make a portfolio website for myself.
But for 'My works' div when I apply the Bootstrap class, I am not getting the result as I am expected to get. The alignment of the div is not in a grid.
Here's how it shows up:
I am not able to fix this problem.
The HTML code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
Issue is with columns used for a single row.
Note that, each row can have only 12 columns. But you are using multiple columns in a single row. so it doesn't work like that.
Refer this more details - https://getbootstrap.com/docs/4.0/layout/grid/
You can try enclosing two cards per each row (assuming you wanted to show twoo cards per row). see below code. Hope this helps.
<!DOCTYPE html>
<html>
<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">
<meta name="description" content="Responsive Portfolio Template">
<meta name="author" content="Suvrat Jain">
<title>Responsive Bootstrap Template for Portfolio</title>
<!-- Bootstrap core CSS -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="menu">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><i class="fa fa-globe"></i></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid splash" id="splash">
<div class="container">
<img src="https://s-media-cache-ak0.pinimg.com/736x/71/9e/59/719e59481d2be40a77ab6c3386fc0a45--photoshop-illustrator-illustrator-tutorials.jpg" alt="Portrait of Mr. Roboto" class="profile-image">
<h1>HELLO!</h1>
<h1 class="intro-text"><span class="lead" id="typed">I am a </span></h1>
<span class="continue"><i class="fa fa-angle-down"></i></span>
</div>
</div>
<!-- About Section -->
<section class="success" id="about">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2>About Me</h2>
<hr class="star-light">
</div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-2">
<p class="content-text" style="text-align:justify;">Hey there! I am a junior software developer based in Mumbai, India. I work with some of the popular front end technologies to create beautiful websites that get noticed. I seek experience to gain more knowledge in the web development field.
</p>
</div>
<div class="col-lg-4">
<p class="content-text">If you are in need of a beautiful simple website, I'm your guy. I look forward to talking to you soon!</p>
</div>
<div class="col-lg-8 col-lg-offset-2 text-center contact-button">
<a href="#contact" class="btn btn-lg btn-outline">
<i class="fa fa-envelope"></i> Contact Me
</a>
</div>
</div>
</div>
</section>
<div class="container-fluid portfolio-container-holder content-section" id="portfolio">
<div class="portfolio-container container">
<h1 class="text-center">My Portfolio</h1>
<hr class="star-portfolio">
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/QFX1CKL/8705c160752271.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Quantum Computing and cryptocurrency</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/5vNfRC9/depositphotos-1245773-stock-photo-simple-math-example.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Addition of Two Numbers in Python</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/GVr9drm/illu-app-modernization-whtbg.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Logistic Regression in Machine Learning</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>AI: myths versus reality</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
<div class="col-md-6 col-xs-11 col-sm-6 portfolio-card-holder">
<div class=" portfolio-card">
<img src="https://i.ibb.co/nwzg94P/0-Yb-Vi-GAYNXI51ek-E.png" alt="Portfolio" class="img-responsive portfolio-img">
<div class="portfolio-img-desc">
<p>Introduction to Computer Vision</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Contact form -->
<div class="container-fluid contact-me-container content-section" id="contact">
<div class="container">
<h1 class="intro-text text-center">Contact Me</h1>
<hr class="star-light">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-user"></i></div>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-at"></i></div>
<input type="text" class="form-control" id="email" placeholder="Email ID">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-phone"></i></div>
<input type="text" class="form-control" id="phone" placeholder="Phone Number">
</div>
</div>
</div>
<div class="col-sm-12">
<textarea class="form-control" rows="5" placeholder="Message"></textarea>
</div>
</div>
<div class="text-center">
<button class="btn btn-default submit-button btn-lg btn-primary"><i class="fa fa-paper-plane"></i> Send</button>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container footer-container">
<div class="row footer-row">
<div class="col-xs-12 col-sm-6 col-md-6 text-center">
<h4 class="text-center">Find me here</h4>
<address> <strong><i class="fa fa-location-arrow"></i> Monsters Inc.</strong><br>Lorem ipsum dolor, sir amet,<br>Aurangabad, India 431001<br><br><a class="tel" href="tel:9999988888" type="tel"><i class="fa fa-mobile"></i><span> +91 </span></a></address>
</div>
<div class="col-xs-12 col-md-6 col-sm-6 social-section">
<div class="text-center">
<h4 class="text-center">Also, I can be found here</h4>
<div class="text-center social-buttons">
<a href="https://www.linkedin.com/in/simplysuvi" class="btn btn-default btn-lg social-button link-linkedin"><i class="fa fa-linkedin"></i>
</a>
<a href="https://instagram.com/simplysuvi" class="btn btn-default btn-lg social-button link-instagram"><i class="fa fa-instagram"></i>
</a>
</div>
<hr class="footer-hr">
<h4 class="author">Made with <i class="fa fa-heart"></i> by <strong>Akshra Dube</strong></h4>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</body>
</html>
I recently started to use html, css and bootstrap-4, I am trying to make a page with a nav-bar, 4 cards and a footer whit info, I used bootstrap to make the row and cols but it seems that they not align how I want. What can I do in this mess?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<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="MYCELIUM.CSS">
<link rel="stylesheet" href="activities.css">
</head>
<script src="https://kit.fontawesome.com/a8809e8f88.js" crossorigin="anonymous"></script>
<body>
<div class="col-md-4 col-sm-6 boxy" class="wrapper">
<div class="pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda">
<p><h2 class="activname">Guided hiking tours</h2></p>
<button class="activbutt" type="button" name="button">SEE DETAILS</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<p></p><br>
<div class="pop-up-2">
<div class="card-2">
<img class="girlimg" src="bike.jpg" alt="bikeactiv">
<p> <h2 class="activname1">Rent a bike(4 hours)</h2> </p>
<button class="activbutt1" type="button" name="button1">SEE DETAILS</button>
</div>
<div class="details">
<div class="duration1">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids1">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper1">
<div class="pop-up-3">
<div class="card-3">
<img class="girlimg" src="climbing.jpg" alt="clim">
<p> <h2 class="climbing">Climbing</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span>FULL DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
<div class="pop-up-4">
<div class="card-4">
<img class="girlimg" src="canoe.jpg" alt="clim">
<p> <h2 class="climbing">Canoe</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:6</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:2</p>
</div>
</div>
</div>
</body>
</html>
You have to make into a row like:
Basic structure:
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
You can make it evolve like:
<div class="row">
<div class="col row mx-0">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
So I have this 2 cards aligned the way i want whit bootstrap and display: flex;. When i try to do some some changes in CSS like moving the details class in middle, or to change the width and height of the card etc it won't work. How can i do it ? Here is the code:
<div class="row">
<div class="col-lg-4 col-md-6 pop-up">
<div class="front">
<div>
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
</div>
</div>
I think you should use the card class from bootstrap. https://getbootstrap.com/docs/4.0/components/card/. Then you will be able to change the default width & height of the card by overriding it from custom CSS.
I have made 4 cards using css, html and bootstrap 3. For some reason the first row doesn't have the 3 cards that i want but the second is, and they are not aligned perfectly when i zoom in(pixels difference).What can i do? You have an img down below of my 4 unaligned cards.
Here is the code :
HTML:
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div>
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div>
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>
CSS:
[![> .front{
margin-top: 30%;
width: 750px;
height:750px;
background-color: #F7F4F2;
align-items: baseline;
margin-left: 20%;
position: relative;
border-radius: 10%;
align-self: flex-start;
}
.girlimg{
max-width: 500px;
min-height: 475px;
border-radius: 10%;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: space-between;
position: absolute;
top:0;
right:0;
margin-left: %;
margin-top: 15%;
font-size: 30px;
}
.duration{
margin-bottom: 25%;
}
.people{
margin-bottom: 25%;
}
.kids{
margin-bottom: 25%;
}
.activname{
display: flex;
flex-direction: row;
margin-left: 7%;
margin-bottom: 5%;
font-size: 45px;
}
.activbutt{
background-color: #ffcc66;
border-radius: 2%;
display: flex;
margin-left: 20%;
font-size: 30px;
padding: 20px;
border: none;
}
Image of my 4 cards:
https://i.stack.imgur.com/6kDFU.png
I removed unwanted margins from your code. Please check this snippet.
.front {
display: flex;
justify-content: space-between;
padding: 10px;
background-color: #F7F4F2;
position: relative;
margin-bottom: 15px;
}
.details{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.activname{
font-size: 20px;
}
.activbutt{
background-color: #ffcc66;
text-align: center;
padding: 10px;
border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row">
<div class="card col-lg-4 col-md-6">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="girl.jpg" alt="asdasda" />
<h2 class="activname">Guided hiking tours</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12"></div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="bike.jpg" alt="asdasda" />
<h2 class="activname">Rent a bike(4 hours)</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:9</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:0</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="climbing.jpg" alt="asdasda" />
<h2 class="activname">Climbing</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>FULL DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:5</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:1</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 pop-up-2">
<div class="front">
<div style="text-align: center;">
<img class="girlimg" src="canoe.jpg" alt="asdasda" />
<h2 class="activname">Canoe</h2>
<button class="activbutt" type="button" name="button">
SEE DETAILS
</button>
</div>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration
<p>QUARTER DAY</p> </i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br />
<p>Max adults:6</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br />
<p>Max children:2</p>
</div>
</div>
</div>
</div>
</div>
I'm trying to center two columns in a row in Bootstrap and no matter what offset or centering, they won't stay on same line in center of full-width column on md size or above
Tried col-md-6 offset and adding row-center and column-center classes, nothing has worked
Here's the full footer code - I want the email and tel to be on one line on larger screens and the two social icons alongside each other on the next row. It wraps nicely to display on mobile, just the larger screens I need some help with.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<footer class="container-fluid footer-container">
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5></a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i><h5>905-749-5700</h5></a>
</div>
</div>
<div class="row row-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
</footer>
Add the 'text-center' class to your rows.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<div id="footer" class="row">
<div class="col-md-12">
<div id="action" class="row text-center">
<div class="col-md-12">
<btn class="footer-button">
BOOK NOW!</h5>
</btn>
</div>
</div>
<div id="contact-methods" class="row text-center">
<div class="col-md-6">
<a class="send-email" href="mailto:bookings#samanthaharris.ca" target="-blank"><i class="fas fa-envelope-square" aria-hidden="true"></i>
<h5>Email Samantha</h5>
</a>
</div>
<div class="col-md-6">
<a class="call" href="tel:905-749-5700"><i class="fas fa-mobile-alt" aria-hidden="true"></i>
<h5>905-749-5700</h5>
</a>
</div>
</div>
<div class="row text-center">
<div class="col-md-6 col-center"><a class="insta" href="https://www.instagram.com" target="-blank"><i class="fab fa-instagram" aria-hidden="true"></i>
</a></div>
<div class="col-md-6 col-center"><a class="facebook" href="https://www.facebook.com" target="-blank"><i class="fab fa-facebook-square" aria-hidden="true"></i></a>
</div>
</div>
</div>
</div>
According to docs try this way:
<div class="row justify-content-center">
<div class="col-*"></div>
<div class="col-*"></div>
</div>