Website structure currently looks like this:
index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
<!-- Own styles -->
<link rel="stylesheet" href="css/styles.css">
<title>My website</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-12 col-md-4 sidebar d-flex flex-column align-items-center justify-content-center text-center fixed-top">
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
<p class="text-muted mt-5 mb-0">123 456 789</p>
<p class="text-muted">test#test.com</p>
<p class="mt-5 text-white">
Language 1
|
Language 2
</p>
<p class="social">
<i class="fab fa-facebook-f"></i></i>
<i class="fab fa-twitter"></i></i>
</p>
<p class="text-muted">© Someone | 2015 - 2019</p>
</div>
<div class="col-12 col-md-8 offset-md-4 d-flex flex-column mt-5 content">
<p>Content</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
styles.css:
#media (max-width: 767.98px) {
.sidebar {
height: auto !important;
padding-top: 10px;
padding-bottom: 10px;
position: static;
}
}
.sidebar {
background-color: #9DB9E8;
height: 100vh;
}
On devices with class md and less I want to split sidebar on the left into two parts. First part should be on the top of the page only with following lines of code:
<img src="images/avatar.jpg" class="rounded-circle">
<h3 class="text-light">John Doe</h3>
<h5 class="text-light">programmer</h5>
Second part should be at the bottom of the page (under div with class content) and contain all the remaining lines of code from sidebar. Both parts should have same styles as sidebar.
How do I achieve this in Bootstrap 4?
To do this, you should split them into two divs.
<div id="section1">
(what ever you want in 1st section.)
</div>
<div id="section2">
(whatever you want in 2nd section.)
</div>
Related
I started to work on Bootstrap and created a card according to the documentation. The card seems to be centered vertically on the page, but not horizontally (it is more in the first part of the page). I would like to have the card (using only Bootstrap if possible) in the center of the page completely (so horizontally too).
I tried using .mx-auto for .card and other various solutions I found online that worked for everybody else. I am out of solutions at the moment and I don't know how to solve it.
Can you please take a look at my code and provide some feedback?
<!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>Bootstrap Cards</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<style>
body {
background-color: rgb(184, 27, 184);
}
</style>
<body class="d-flex">
<div class="container my-5"> <!--Bootstrap always starts with a container; my = margin on the y axis, top & bottom-->
<div class="row align-items-center justify-content-center w-100">
<div class="col-lg-3 col-7">
<div class="card">
<img src="https://picsum.photos/id/237/300/200" class="card-img-top" alt="Black puppy">
<div class="card-body">
<h5 class="card-title">Lola</h5>
<p class="card-text">Is she the next member of your family? She is eager to meet you.</p>
</div>
<ul class="list-group list-group-flash">
<li class="list-group-item">Love ball of only 7 kg</li>
<li class="list-group-item">Shy at first, but very friendly after</li>
<li class="list-group-item">Enjoys walks by the river</li>
</ul>
<div class="card-body">
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Adopt today</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
Thank you!
I am trying to center the content of a column using Bootstrap. This is my current code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
I have tried using d-flex justify-content-center, as follows:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<!-- CODE -->
<header>
<div class="container-fluid">
<div class="row">
<!-- LEFT -->
<div class="col-md-6 p-md-5 p-4 d-flex justify-content-center" style="background-color: lime;">
<div> <!-- THIS SHOULD BE IN THE CENTER -->
<h1>Welcome</h1>
<h2>to my web!</h2>
</div>
<div> <!-- THIS SHOULD BE IN THE BOTTOM -->
<p>Icons</p>
</div>
</div>
<!-- RIGHT -->
<div class="col-6 d-md-block d-none" style="background-color: red"></div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>
But this is not working...
How can I do to put the elements correctly inside the column?
You can add “ align-items-center” to the class, if that still doesn’t work, make sure you’re not adding different margins to left and right of the section, but justify-content-center and align-items-center will work fine
Adding d-flex flex-column h-100 to the child, with an align-items-center solves the scenario.
I'm new to Bootstrap and can't get margins between things. I put mb-12 in the navbar class and also mt-12 in the container class for good measure, but nothing is happening. Everything else is working.
I've checked the Bootstrap documentation and posts on here and haven't been able to figure it out.
<!DOCTYPE html>
<html>
<head>
<Title>The Title</Title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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>
<nav class="navbar mb-12 py-4 bg-warning">
<H1>Words Here</H1>
</nav>
<div class="container mt-12">
<div class="row">
<div class="col bg-light">Text</div>
<div class="col bg-primary">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="col bg-success">Text</div>
</div>
</div>
</body>
</html>
Classes mt-12 and mb-12 are not working simply because they are not supported by Bootstrap you can use from 0 to 5 only for padding and margin bootstrap classes.
You can check here
Other way you can custom your own classes mt-12 nd mb-12 with your CSS :
.mb-12{
margin-bottom: 20px!important; /* You can custom the space you want
}
.mt-12{
margin-top: 20px!important; /* You can custom the space you want
}
I think you are not using proper class for the margin bottom. For example I used mb-2 and it worked fine. mb-12 is not proper class.
You need to consult some tutorials related to bootstrap in order to enhance your skills;
<!DOCTYPE html>
<html>
<head>
<Title>The Title</Title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 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>
<nav class="navbar mb-2 py-4 bg-warning">
<H1>Words Here</H1>
</nav>
<div class="container mt-12">
<div class="row">
<div class="col bg-light">Text</div>
<div class="col bg-primary">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="col bg-success">Text</div>
</div>
</div>
</body>
</html>
There are many helpful tutorials available. For example
I am trying to get my navbar buttons to line up on the right side.
I have tried:
class="pull-right" && "text-right"
I have also tried:
.btn-talent{
align-items: right
}
I am struggling. Any help would be greatly appreciated
I also put this in a codepen:
https://codepen.io/rob-connolly/pen/yLaGMyW[enter image description here]1
.btn-investors {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
.btn-talent {
background: #029D89;
color: white;
margin-right: 4vw;
border-radius: 4px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>meetlete: meet your favorite athletes!</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Paytone+One&family=Questrial&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="./assets/images/favicon.png" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/style.css">
</head>
<body>
<!-- --- Navbar Issue -- -->
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<!-- btn one issue -->
<button class="btn btn-talent" type="button">Talent</button>
<!-- btn two issue -->
<button class="btn btn-investors" type="button">Investors</button>
</nav>
<!-- Content -->
<!-- Footer -->
<!-- Footer -->
<footer class="container-flex bg-footerTop text-center text-lg-start">
<!-- Grid container -->
<div class="p-4">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-6 col-md-12 mb-4 mb-md-0">
<h5 class="text-uppercase">About Us</h5>
<p>
Meetlete wants to give you the once in a lifetime opportunity to meet one of your favorite athletes. We are the first platform that allows fans to have personal one on one video calls with the biggest stars in sports. With every meetlete video call, we
donate a portion of the proceeds to the foundation of the athlete's choice. What makes this possible is the Meetlete secure and private platform. <br><br>Launching 2/14/21! <i class="far fa-heart"></i>
</p>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase">Address:</h5>
<span>Meetlete, Inc.<br>
Po Box 294<br>
La Mesa, CA 91944
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<h5 class="text-uppercase mb-0">Links</h5>
<ul class="list-unstyled">
<li>
Talent Sign Up
</li>
<li>
Fans Sign Up
</li>
<li>
Investor Info
</li>
<li>
Press
</li>
</ul>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
<!-- Grid container -->
<!-- Copyright -->
<div class="text-center p-3 copyright" style="background-color: rgba(0, 0, 0, 0.2)">
© 2020 Copyright:
<a class="text-dark" href="https://meetlete.com">Meetlete.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- bootstrap js file-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
.
You should wrap your buttons with div. .navbar is a flexbox and uses justify: space-between rule. Here the buttons are flexbox items that's why they are spread inside nav.
<nav class="navbar navbar-light">
<a class="navbar-brand" href="https://meetlete.com">
<img src="./assets/images/meetlete-logo.png" width="200px" alt="Meetlete Logo">
</a>
<div>
<button class="btn btn-talent" type="button">Talent</button>
<button class="btn btn-investors" type="button">Investors</button>
</div>
</nav>
I'm trying to change the width of the div elements during responsiveness.
so when I reduce the screen width to around 600px the div elements should increase their width to 50%.
Now I noticed no breakpoint for w-* class, and was wondering is there any way to do it??
also I'm allowed to only use bootstrap and avoid as much as possible to add my own CSS.
can any one help??
here is the code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex>div
{
height:200px;
background-color:black;
margin-left:10px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body d-flex align-items-center flex-wrap">
<div class="flex-grow-1">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
<div class="flex-grow-1 ">
</div>
</div>
</div>
</div>
</body>
</html>
you can do it with pinch of jquery code like below,
if(jQuery(window).width() < 601px){
jQuery('.your-div-class').addClass('w-50');
}
else {
jQuery('.your-div-class').removeClass('w-50');
}
Please make sure you have included jquery in your page as well.
Bootstrap's break points are Small 540px and Medium 720px. So you could try the following. This example defaults to 5 blocks per row, and then 2 blocks per row on a small break point.:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.1.3/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.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<style>
.d-flex {
height: 200px;
background-color: black;
border: 1px solid yellow;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="card bg-light">
<div class="card-body row">
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
<div class="d-flex col-6 col-sm-2">
</div>
</div>
</div>
</div>
</body>
</html>