For example:
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="image">
<img src="https://picsum.photos/1200/1200" alt="" class="img-fluid">
</div>
</div>
<div class="col-lg-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
The sandbox code:
https://codesandbox.io/s/interesting-euler-sh22vn?file=/index.html
Photo what I want:
https://ibb.co/MnLQf6n
My problem is when I add fix height, the text is moving when I change screen view.
I need to vertical align the text to image center point on desktop screen.
just add align-items-center to row and it will worce the layout to be vertically center learns about flex from here and bootstrap flex properties from here
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row align-items-center">
<div class="col-8">
<div class="image">
<img
src="https://picsum.photos/1200/1200"
alt=""
class="img-fluid"
/>
</div>
</div>
<div class="col-4">
<div class="text">
<h1>Text Title</h1>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</body>
</html>
This will solve your problem.
<div class="row align-items-center">
Related
This question already has answers here:
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed last month.
Please take a look at the demo code. When you scroll to the bottom, the stick to top element is always at the top, but the stick to bottom element does not stick to the bottom at all. Is there anything wrong?
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger">
<div class="col bg-warning" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
Thank you.
I recommend paying attention to this answer to a similar problem. In your case, accordingly, you can try to make the parent element as flex (.d-flex in Bootstrap), and for the stick element add margin-top: auto (.mt-auto in Bootstrap).
A modified example is below:
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous"
/>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row" style="height: 2000px;">
<div class="col bg-success">
<div class="col bg-info" style="position: sticky; top: 0">
Stick to top
</div>
</div>
<div class="col bg-danger d-flex">
<div class="col bg-warning mt-auto" style="position: sticky; bottom: 0">
Stick to bottom
</div>
</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"
></script>
</body>
</html>
I am trying to fix a bug in this website, so I reproduce the problem in the sandbox below
https://codesandbox.io/s/confident-engelbart-q70uc8?file=/index.html
So right now the problem is when ever you change the img inside,if the size is different, the layout will extend to different height.
You can see as the image change the layout height will change as well, I tried "height" but this will ruin the responsive feature of it, is there any way to mantain the same height but still be able to be responsive?
<!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="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<title>Hello, world!</title>
</head>
<body>
<section class="py-4 d-flex flex-column align-items-center bg-dark text-white min-height">
<div class="container">
<div class="row">
<div class="col-md-5 d-flex justify-content-end flex-column main-heading">
<h1 class="display-3 pb-3">Hello</h1>
<span class="text-info lead">One two three</span>
</div>
<div class="col-md-7 d-md-flex justify-content-center align-items-center flex-column">
<img src="https://i.imgur.com/l4Zvchl.jpg" class="img-fluid lazyload" alt="Page Wallpaper" />
</div>
</div>
</div>
</section>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You can try to add this style="object-fit: cover; width: 100%; height: 300px;" to your img element (you can customize it with class), but your image will be cut off a bit due to fixed height as a trade-off.
Mobile size
Desktop size
https://codesandbox.io/s/restless-fire-bp6vcv?file=/index.html:1095-1141
I need to make a full-page sized div background.
So I'm having these two columns: col-9 sized div in gray and col-3 div in blue color. Here's the code of the two cols:
#media print {
#page {
size: auto;
margin: 0;
}
}
<html>
<head>
<title>Test Full Page</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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9 h-100" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3 h-100" style="background-color:#0BA9FE;">
</div>
</div>
</div>
</body>
</html>
How do I make both div cols full-sized height on every page? like the first page, second and third page. These two divs won't fill the entire page even when I added the h-100 class.
Any help will be much appreciated.
Thank you
Remove h-100 from the class in div.
Refer working code https://jsfiddle.net/pallaviyadav/n3Lus0v7/8/
<html>
<head>
<title>Test Full Page</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.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-9" style="background-color:#F8F8FF;">
<div style="margin-top: 20px;">
<div class="row">
<div class="col-11">
<br />
<h4>Title</h4>
<hr>
</div>
</div>
<div class="row" style="padding-left: 1.5rem;">
<div class="col-6">
<strong>Title</strong>
<p align="justify">
<span>Date</span>
</p>
<p align="justify">
Blablabla
</p>
</div>
</div>
</div>
</div>
<div class="col-3" style="background-color:red;">
</div>
</div>
</div>
</body>
</html>
I want to put the content I have(for example image) in center of the row and column.
I tried using justify-content-center, or align-item and text-align: center, but none worked.
I need the image to be in center of the row. Like, if I have 4 columns, i need tohem to be centered on all 4 columns.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
</div>
</div>
</div>
</body>
</html>
You can use the following CSS on the images:
display: block;
margin: 0 auto
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Lessons</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Stilurile mele -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- Fisier spre jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="crossorigin="anonymous"></script>
<!-- Fisier spre javascript -->
<script type="text/javascript" src="file.js" async></script>
<!-- FontAwesome - Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
<div class="col-xl-4">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png" style="margin:0 auto; display:block">
</div>
</div>
</div>
</div>
</body>
</html>
Bootstrap 4 has new class which you can add with row class to center the content.
<div class="row justify-content-center">
!-- your content here --!
</div>
Hopefully will help you. This is also answered in similar question
Center Contents of Bootstrap row container
Just Add text-center class to each column you want its content to be aligned center.
<div class="col-xl-4 text-center">
<img class="img-fluid" src="https://i.ibb.co/6WddWMk/test.png">
</div>
Here is the link to your code with this class added to every column.
Link
I have a order of divs in bootstrap:
On normal computers i want:
first second third
But on mobile i want:
third
second
first
I have checked the bootstrap grid system page and came up with this:
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col order-md-1 order-sm-3 order-xs-3">
First,
</div>
<div class="col order-md-2 order-sm-2 order-xs-2">
Second,
</div>
<div class="col order-md-3 order-sm-1 order-xs-1">
Third,
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
On mobile i keeps displaying:
first
second
third
Can anyone tell me what i am doing wrong?
This is all you need to re-order. The -xs- infix has been removed, and you just need the order for the smallest and medium.
https://codeply.com/go/mNZVT7Vpng
<div class="container">
<div class="row">
<div class="col order-md-1 order-3">
First,
</div>
<div class="col order-2">
Second,
</div>
<div class="col order-md-3 order-1">
Third,
</div>
</div>
</div>
A-B-C to C-B-A
Also see: Bootstrap 4 grid - 3 stacked columns on left, 1 on right