I have a issue with vertical alignment in a container. I have the following code that does what I want, that is, the first row in the center and the second at the bottom of the container.
Full screen
<header class="masthead" id="home">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-evenly text-center">
<div class="col-4">
<img src="assets/img/profil.png" class="rounded-circle img-fluid" alt="...">
<hr class="divider" />
<h1 class="text-white font-weight-bold">d3vyce</h1>
</div>
<div class="col-md-8 col-lg-4">
<h2 class="text-white font-weight-bold">Hi 👋, Welcome to my Site!</h2>
<p class="text-white">Developer, CTF Player, Homelab, 3D Printing</p>
<hr class="divider" />
<div class="d-grid col-6 mx-auto">
<a class="btn btn-outline-light btn-lg" href="https://blog.d3vyce.fr" target="_blank"><i class="fa fa-bookmark fa-lg"></i> Blog</a>
<a class="btn mt-2 btn-outline-light btn-lg" href="https://github.com/d3vyce" target="_blank"><i class="fa fa-github fa-lg"></i> Github</a>
</div>
</div>
</div>
<div class="row head-row justify-content-center">
<div class="col-12 mouse_scroll p-0">
<a href="#about">
<div class="mouse">
<div class="wheel"></div>
</div>
<div>
<span class="m_scroll_arrows unu"></span>
<span class="m_scroll_arrows doi"></span>
<span class="m_scroll_arrows trei"></span>
</div>
</a>
</div>
</div>
</div>
</header>
For the alignment at the bottom of the second row I use the following CSS:
.mouse_scroll {
display: block;
width: 24px;
height: 100px;
position: absolute;
bottom: 0; }
The problem happens with the responsive. The columns of the first row are well one on top of the other, but the space between the two is much too important and I can't modify it :(
I tried to search on stackoverflow for answers, but after many tests I'm in a dead end...
Reponsive
Thank you in advance for your answers!
I'm creating a Santa letter writing website and I'm trying to get a graphic of Santa to look like it is riding on top of the snow. The issue is I cannot seem to get it to work responsively. For reference below is a mockup image of how I would like the Santa graphic placed with everything else I have. How can I make this work?
The container needed bit restructuring to make it work. On the image set following classes img-fluid w-50 h-50 align-self-end
<!DOCTYPE html>
<html lang="en" referrerpolicy="no-referrer">
<head referrerpolicy="no-referrer">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- remove following in production-->
<meta name="referrer" content="no-referrer">
<title>Reindeer Express</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<!-- link rel="stylesheet" href="css/style.css" -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://kit.fontawesome.com/1463370ce3.js" crossorigin="anonymous"></script>
<style>
.bg-img {
background-image: url("https://i.imgur.com/9L54Zdw.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.custom-shape-divider-bottom-1637548946 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1637548946 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 70px;
}
.custom-shape-divider-bottom-1637548946 .shape-fill {
fill: #FFFFFF;
}
#stop-btn {
display: none;
}
#how-to-mail {
display: none;
}
#hidden-template {
display: none;
}
.img-anim {
transform-origin: 25% 75%;
animation: ride 2s ease-in-out 0s infinite alternate;
}
#keyframes ride {
0% {
transform: rotateZ(356deg);
}
100% {
transform: rotateZ(359deg);
}
}
</style>
</head>
<body onload=display_countdown; referrerpolicy="no-referrer">
<div class="bg-img">
<nav class="navbar navbar-dark navbar-expand-sm">
<div class="container-fluid position-relative">
<a class="navbar-brand position-absolute fixed-top" style="left:12px" href="#">
<img src="https://i.imgur.com/vavioW9.png" alt="" width="24" height="29"
class="d-inline-block align-text-top">
Reindeer Express
</a>
<div class="navbar-collapse collapse flex-grow-0 mx-auto">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Home</u></a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
<li class="nav-item ">
<a class="nav-link text-white" href="#"><u>Nav Item</u></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container col-xxl-8 px-4 py-5">
<div class="d-sm-flex justify-content-between">
<img class="img-fluid w-50 h-50 align-self-end img-anim" src="https://i.imgur.com/4n4uujr.png">
<div class="col flex-lg-row-reverse align-items-center g-5 p-5">
<div class="col-10">
<h1 class="fw-bold lh-1 mb-3 text-white">Reindeer Express</h1>
<p class="lead text-white" id="welcome">Welcome Friends to the Reindeer Express! Have you ever wanted to
write
a letter
to Santa Clause? Well now you can! Fill out the form below to let Santa know what you would like for
Christmas!
But that is not all! You can also download a copy of your letter once you send it! How cool is that?</p>
</div>
<div class="">
<h1 class="text-white" id="countdown_days"></h1>
</div>
</div>
</div>
</div>
<div class="custom-shape-divider-bottom-1637548946">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z"
opacity=".25" class="shape-fill"></path>
<path
d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z"
opacity=".5" class="shape-fill"></path>
<path
d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z"
class="shape-fill"></path>
</svg>
</div>
</div>
<section id="form-area" class="py-3">
<div class="container">
<div class="row py-5">
<div class="col text-center">
<h2>Write a letter to Santa</h2>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-12 ">
<img class="img-fluid d-block mx-auto w-75" src="https://i.imgur.com/ZeukS4C.png"
alt="santa standing by a reindeer">
</div>
<div class="col-md-7 col-sm-12">
<form id="form" onsubmit="handleSubmit(event)">
<div class="mb-3 form-floating">
<input type="email" placeholder="ex: parent#mail.com" class="form-control" id="parentEmail"
oninput="handleChange(event)" required>
<label for="parentEmail" class="form-label">Parent's Email Address</label>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3 ">
<input type="text" placeholder="ex: Sally Smith" class="form-control" id="name"
oninput="handleChange(event)" required>
<label for="name" class="form-label">Name</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3 ">
<input type="number" placeholder="3" class="form-control" id="age" oninput="handleChange(event)"
required min="0" max="150">
<label for="age" class="form-label">Age</label>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="gender" aria-label="select gender" oninput="handleChange(event)"
required>
<option>Pick boy or girl</option>
<option value="boy">Boy</option>
<option value="girl">Girl</option>
</select>
<label for="gender" class="form-label">Gender</label>
</div>
</div>
<div class="col">
<div class="form-floating mb-3">
<select class="form-select" id="behavior" aria-label="select naughty or nice"
oninput="handleChange(event)" required>
<option>Select option</option>
<option value="nice">Nice</option>
<option value="naughty">Naughty</option>
<option value="okay">Okay</option>
</select>
<label for="behavior" class="form-label">Behavior</label>
</div>
</div>
</div>
<div class="mb-3">
<label for="wishlistOne" class="form-label">Name three things you would like for Christmas:</label>
<input type="text" placeholder="1." class="form-control" id="wishlistOne" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="2." class="form-control" id="wishlistTwo" oninput="handleChange(event)"
required>
</div>
<div class="mb-3">
<input type="text" placeholder="3." class="form-control" id="wishlistThree" oninput="handleChange(event)"
required>
</div>
<div class="mb-3 form-floating">
<textarea class="form-control textbox" id="message" oninput="handleChange(event)" rows="10"
required></textarea>
<label for="message" class="form-label">Write a message for Santa</label>
<div class="row mt-1">
<div class="col">
<p id="instructions" class="text-muted"></p>
</div>
<div class="col d-flex flex-row-reverse">
<button class="btn btn-outline-primary btn-sm" id="start-btn">
<i class="fas fa-microphone"></i>
Start Voice to Text
</button>
<button class="btn btn-outline-primary btn-sm" id="stop-btn">
<i class="fas fa-microphone-slash"></i>
End Voice to Text
</button>
</div>
</div>
</div>
<div class="col-12">
<button id="send-letter-btn" class="btn btn-danger" type="submit" value="submit">
<i class="fas fa-paper-plane"></i> Submit
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<section id="how-to-mail" class="py-3">
<div class="container">
<div class="row">
<div class="col text-center">
<h3>How to mail your letter</h3>
<p class="fw-light">Instructions from the USPS</p>
</div>
</div>
<div class="row">
<div class="col mail-instructions">
<p>
<span class="number">1. </span>Print downloaded PDF with your letter
</p>
<p>
<span class="number">2. </span>Place letter in envelope
</p>
<p>
<span class="number">3. </span>Address letter to "Santa Claus, North Pole"
</p>
<p>
<span class="number">4. </span>Place First-Class Mail stamp to envelope
</p>
<p>
<span class="number">5. </span>Have parent mail your letter!
<br>
<small class="fw-light">Additional instructions for parents</small>
</p>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-light">
<p>footer</p>
</footer>
<!-- hidden template goes here -->
<div id="hidden-template">
<div class="container">
<div class="row">
<div class="col">
<p id="letter-name"></p>
<p id="letter-age"></p>
<p id="letter-gender"></p>
<p id="letter-behavior"></p>
<p id="letter-wishlist-one"></p>
<p id="letter-wishlist-two"></p>
<p id="letter-wishlist-three"></p>
<p id="letter-message"></p>
</div>
</div>
</div>
<div id="elementH"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./js/bootstrap.bundle.js"></script>
<script src="./js/form.js"></script>
<script src="./js/speech.js"></script>
<script>
var display_countdown = setInterval(function () {
countdown();
}, 10)
function countdown() {
var currentDate = new Date();
var christmasDate = new Date("12/25/2021 12:00:00");
var timeLeft = christmasDate.getTime() - currentDate.getTime();
var days_Left = Math.round(timeLeft / (1000 * 60 * 60 * 24));
if (currentDate.getTime() !== christmasDate.getTime()) {
days_Left - 1;
document.getElementById('countdown_days').innerHTML = "Christmas is in " + days_Left + " Days!";
} else {
document.getElementById('countdown_days').innerHTML = "MERRY CHRISTMAS!";
}
display_countdown;
}
</script>
</body>
</html>
Note: In order to make your code work in my environment I had to made some changes. Like putting entire style.css in <style> tag, added meta referer tag, added bootstrap cdn link. Remove the animation if you don't like it.
Compress the background image it's too big 1.77mb. Convert it to jpg, because the png is not transparent.
That should work just great if you add img-fluid to the image Class.
<img src="https://i.imgur.com/4n4uujr.png" class="img-fluid">
I have this code
<div class="row">
<h3><b>We've got you covered</b></h3>
<h6>Find things to do in cities around the world</h6>
<div class="col-md-4">
<div class="div-icon col">
<i class="fas fa-info h1"></i>
</div>
<div class="div-content col">
<b>Explore top attractions</b>
<p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
</div>
</div>
<div class="col-md-4">
</div>
<div class="col-md-4">
</div>
</div>
I want the icon and text to align like this
The icon and text code
<div class="col-md-4">
<div class="div-icon col">
<i class="fas fa-info h1"></i>
</div>
<div class="div-content col">
<b>Explore top attractions</b>
<p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
</div>
</div>
Using col and col does not divide the col-md-4 into two. Is there a way i can display icon and content side by side using only bootstrap classes?
you have to wrap your inner cols with div class="row" and give cols specific size
<div class="col-md-4">
<div class="row">
<div class="div-icon col-md-1">
<i class="fas fa-info h1"></i>
</div>
<div class="div-content col-md-11">
<b>Explore top attractions</b>
<p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
</div>
</div>
</div>
I would like there to be some space between the two.
Here is a picture of the footer in question on imgur.
I tried to add margin right to the detail-box but it just shifts the HTML form below it. Can anyone help? Thanks in advance.
<footer class="page-footer red">
<div class="container">
<div class="row">
<div id="detail-box" class="col-md-6">
<h5 class="font-weight-bold adres"><i class="fas fa-map-marker-alt"></i>Adres</h5>
<p>Kıbrısonline Lefkoşa Merkez Ofisi, Bedreddin Demirel Cad. Arabacıoğlu APT. no:121 Yenişehir - Lefkoşa - P.K. 500 Mersin 10 TURKEY</p>
<h5 class="font-weight-bold merkez"><i class="fas fa-phone-volume"></i>Cagri Merkezi</h5>
<p>+90 (392) 444 0 433</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope-square"></i>Email</h5>
<p>hizmet#kibrisonline.com</p>
<h5 class="font-weight-bold email"><i class="fas fa-envelope"></i>Email</h5>
<p>kurumsal#kibrisonline.com</p>
<h5 class="font-weight-bold">Bizi Takip Edin:</h5>
<span><i class="icons icon-social-instagram footer-icon"></i></span>
<span><i class="icons icon-social-facebook footer-icon"></i></span>
<span><i class="icons icon-social-twitter footer-icon"></i></span>
<span><i class="icons icon-social-linkedin footer-icon"></i></span>
</div>
<div class="col-md-6">
<form action="" class="row">
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Ad" placeholder="Adiniz*">
</div>
<div class="col-md-6 py-1">
<input type="text" class="form-control" name="Soyad" placeholder="Soyadiniz*">
</div>
<div class="col-md-6 py-1">
<input type="email" class="form-control" name="E-posta" placeholder="E-posta*">
</div>
<div class="col-md-6 py-1">
<input type="tel" class="form-control" name="Telefon" placeholder="Telefon*">
</div>
<div class="col-md-12 py-1">
<textarea class="form-control" name="Mesaj" placeholder="Mesajiniz*"></textarea>
</div>
</form>
<button id="gonder" type="button" class="btn btn-outline-danger"><i class="far fa-paper-plane"></i>Gonder</button>
</div>
</div>
<hr class="border-white" />
<div class="row align-items-center">
<div class="col-4">
<img src="/assets/img/kol-logoldpi2.svg" class="img-fluid" />
</div>
<div class="col">
<div class="copyright">
<p>© 2018 Copyright Text Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
<p>Made with <span style="color: #e25555;">♥</span> by a man from The United Kingdom of Great Britain and Northern Ireland.</p>
</div>
</div>
</div>
</div>
Here's a solution using flexbox:
https://codepen.io/anon/pen/QXgyWQ
<div class="container">
<div class="row">
<div class="col-md-5">
<div style="background: blue;">
left
</div>
</div>
<div class="col-md-6 ml-auto">
<div style="background: red;">
left
</div>
</div>
</div>
</div>
You can wrap that section inside a div and set a max-width.
Something like this:
<div id="detail-box" class="col-md-6">
<div class="detail-box-wrapper" style="max-width: 300px;">
<!-- rest of your codes -->
</div>
</div>
You can set the width to 100% on small screen sizes.
div#detail-box {
max-width: calc(50% - 30px) !important;
margin-right: 30px;
}
You can add this css for make margin right you can increase the value i'e 30px as per your need in both the property
example {max-width: calc(50% - 50px) !Important;}
{margin-right:30px;}
Good day. Tell me please. Taught django, and took the template html, css, js. There is used bootstrap. Few adapted it for myself. He worked on a 17 '' monitor. Actually, when the 21 'monitor began to look, the blocks ran over each other. Besides, on 15'6, through the phone everything is in order. Tried to attribute in addition to col-sm as col-lg - the result did not. Tell me, please, how can I solve this problem.
It should be - https://i.stack.imgur.com/usEMI.png
How it happened - https://i.stack.imgur.com/UvUfX.png
Right-sidebar code:
<div class="col-md-9 col-lg-9">
<div class="col-md-12 col-lg-12 page-body">
<div class="row">
<div class="sub-title">
<h2>Some Notes</h2>
<i class="icon-envelope"></i>
</div>
<div class="col-md-12 col-lg-12 content-page">
<div class="col-md-12 col-lg-12 blog-post">
<div class="post-title">
<h1>джанго код</h1>
</div>
<div class="post-info">
<span>джанго код / by джанго код</span>
</div>
<p style="word-break: break-all"> джанго код</p>
<span>Read More</span>
</div>
<div class="col-md-12 col-lg-12 text-center">
Load
<div id="post-end-message"></div>
</div>
</div>
</div>
Left-sidebar code:
<div id="main">
<!-- about(left sidebar) -->
<div class ="col-md-3 col-lg-3">
<div class="about-fixed">
<div class="my-pic">
<img src="{% static 'images/pic/av-pic.png' %}" alt="av-pic">
</div>
<div class="my-detail">
<div class="white-spacing">
<h1></h1>
<span>Learning Web Development</span>
</div>
<ul class="social-icon">
<li><i class="fa fa-github"></i></li>
<li><i class="fa fa-vk"></i></li>
</ul>
</div>
P.S. Sorry for english.