HTML + CSS - Resize images for mobile only - html

I'll just jump straight in and show you rather than explain.
So this is how my website looks on browser:
And this is how my website looks when it's viewed on mobile:
Anyone give me any advice on how to fix it? I've tried bootstrap and media queries but im struggling with getting something to resize the images to a small enough size so that they appear next to each other on mobile.
Head:
img.mob-img {
width: 220;
height: 333;
}
#media screen and (max-width: 992) {
img.mob-img {
width: 100px;
height: auto;
}
}
#media screen and (max-width: 600) {
img.mob-img {
width: 100px;
height: auto;
}
}
<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<img id="drinks" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" > OR
<img id="wildcard" class="mob-img" src="assets/js/games/Cards/card-placeholder.png" >
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>

I set the image into a container <div style="display:flex; justify-content:center;"> and add max-width to your image css
img.mob-img {
width: 220px;
height: 333px;
}
#media screen and (max-width: 992) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
#media screen and (max-width: 600) {
img.mob-img {
max-width: 100px;
height: auto;
}
}
<head>
<title>DrinkMania - Drink or Dare</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="robots" content="index, follow">
<meta name="description" content="Drink or Dare! - Truth or dare developed with students in mind!">
<meta name="keywords" content="kings, ring of fire, drinking games, drinkmania, drinking games online,student, frat, dirty pint, kings cup, drinking games online,
app, mobile website, android, ios, reddit, scott montford, playing cards, university, party, friends, talisman webs">
<link rel="stylesheet" href="assets/css/main.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145322216-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '');
</script>
</head>
<body class="is-preload">
Section of the body:
<!-- Banner -->
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div style="display:flex; justify-content:center;">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<video src="images/banner.mp4" muted autoplay loop playsinline></video>
</section>
</body>

OK, you don't need to set two different max-widths when the values you're putting in them are the same. I would put the width at 100% with a max-width of 100px if that's the size you need. I'm not a big fan of inline css like you have it. I would rename the div you have the flex applied to and then put the code in with your other styling so it's not all over the place. It just helps to see it in one spot if you can.
<div id="cards">
<img id="drinks" class="mob-img" src="https://cdn.pixabay.com/photo/2020/01/31/07/10/billboards-4807268_960_720.jpg" > OR
<img id="wildcard" class="mob-img" src="https://cdn.pixabay.com/photo/2018/03/06/20/25/dog-3204497_960_720.jpg" >
</div>
CSS
#cards {
display:flex;
justify-content:center;
}
img.mob-img {
width: 220px;
height: 333px;
}
#media screen and (max-width: 992px) {
img.mob-img {
width: 100%;
max-width: 100px;
height: auto;
}
}

is this what you are trying to do? I made sure it is responsive too. I didn't need to use any of the CSS you provided since you said you are using bootstrap.
I also made a few changes to the HTML by adding more divs to get this result.
if this is not your desired output please let me know in a comment I will try my best to help you out.
Ps. I commented out the video because it was causing horizontal scrolling.
.image-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.image-holder {
padding: 10px;
}
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<section id="banner" data-video="images/banner">
<div class="inner">
<header>
<h1>Drink or Dare</h1><br>
<p id="kingCount"></p><br>
<div class="holder">
<div class="image-container">
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/200">
</div>
<span>OR</span>
<div class="image-holder">
<img id="drinks" class="mob-img img-fluid" src="https://picsum.photos/201">
</div>
</div>
</div>
</header>
<ul class="actions special">
<li>Draw 2 Cards</li><br>
</ul>
</div>
Learn More
<!-- <video src="images/banner.mp4" muted autoplay loop playsinline></video> -->
</section>
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>

Related

How to properly size a logo in bootstrap navbar

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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 href="./styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img style="padding: 0%;"src="./imgs/HHLogo-1 (1).png" alt="" width="30" height="auto" class="d-inline-block align-top">
</a>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
I am trying to stick a company logo in the navbar in bootstrap5. The image is an png. For some reason the image is properly sized but the navbar is way too thick. How can I size the navbar appropriately? . I have tried everything I have came across on here on stackoverflow and other forums/websites. I have tried changed padding and max navbar height among other things. Can you help me out?? Thank you so much any insight is much appreciated.
I added two selectors to your css - .navbar-brand { ... } and .navbar-brand > img { ... }:
.navbar-brand {
width: 150px;
}
.navbar-brand > img {
width: 100%;
}
Now you can adjust the size of the navbar and logo yourself by changing the width of the .navbar-brand { ... } selector.
html, body {
height: 100%;
margin: 0;
}
.navbar-brand {
width: 150px;
}
.navbar-brand > img {
width: 100%;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<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 href="./styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img style="padding: 0%;"src="https://i.stack.imgur.com/RHYjg.png" alt="" width="30" height="auto" class="d-inline-block align-top">
</a>
</div>
</nav>
<!-- Option 1: Bootstrap Bundle with Popper -->
<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>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>
use this
nav a.navbar-brand {
max-width: 150px;
margin: 0;
}

How do you do padding for bootstrap img-fluid

Not much of a front end developer, I tried all kinds of trix, margin, p-0, style="padding:20px" but nothing seems to be moving my fluid image to position it where I want during page load, assistance much appreciated.
**HTML**
<img class="img-fluid" src="~/Content/MyImage.jpg"/>
**CSS**
.img-fluid {
padding-left:20px;
}
I don't know what you exactly want.
So I have guesswork you want use "Bootstrap" because you did written "img-fluid" class.
I think the code below will help you.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Bootstrap JS CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<title>Demo</title>
</head>
<body>
<div id="root" class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<img class="img-fluid" src="https://placehold.it/1920x1080.png" alt="image"/>
</div>
</div>
</div>
</body>
</html>
CSS Code
html, body {
width: 100%;
height: 100%;
}
.row > div {
padding-left: 0px;
padding-right: 0px;
}
.img-fluid {
padding-left: 20px;
padding-right: 20px;
}

bootstrap 4 internal css modification

I'm new to bootstrap. Can anyone lend some insight on how to modify bootstrap. I created a example site but having trouble modifying after basic bootstrap. I have "container" and have the font blue but when I created another container "container new-place" and try to modify with interal css it doesn't work. Can I create my own "custom" bootstrap classes? How do I change the text of lets say I have ten "container new-place" and five "container" how can i modify each group?
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" http-equiv="X-UA-Compatible" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
h1 {
color:yellow;
}
.container{
color:blue;
}
.container new-place {
color:red;
}
</style>
<title>Practice Title</title>
</head>
<body>
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-3">Fluid jumbo heading</h1>
<p class="lead">Jumbo helper text</p>
<hr class="my-2">
<p>More info</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="Jumbo action link" role="button">Jumbo action name</a>
</p>
</div>
</div>
<div class="container new-place" date-time="00:00">
<h1>hello</h1>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
You have the right idea, but the implementation is slightly wrong.
For example
<div class="container new-place" date-time="00:00">
<h1>hello</h1>
</div>
You have created a style which combines two classes. This is correct as it will have a greater specificity and allow you to override the Bootstrap style. The css is incorrect. You have
.container new-place {
color:red;
}
The css should be
.container.new-place {
color:red;
}
Now the style will apply correctly.
You can. Use !important. For example:
.container{
color:blue !important;
}
.new-place {
color:red !important;
}

bootstrap img responsive height does not keep container height

I have an image that want to be responsive to the container size.
The parent container (cover-photo) has a height of 180px.
The image has a height of 853px. However when using img-fluid, the image does not keep the container height of 180px instead it keeps its own height of 853px.
<!doctype html>
<html lang="en">
<head>
<title>Hello, world!</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="css/bootstrap.min.css">
<style>
.cover-photo {
height: 180px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="cover-photo">
<img class="img-fluid" src="http://newlovewallpapers.in/images/hd-love-images-and-wallpaper/hd-love-images-and-wallpaper-11-1280.jpg" alt="Background profile">
</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> -->
<script src="js/parallax.js"></script>
</body>
</html>
I understand that img-fluid in Bootstrap is max-width: 100%; and height: auto; and are applied to the image so that it scales with the parent element. But in this case it does not scale to the parent height.
Any insights? Thanks!
Good morning
You need to give following CSS to img-fluid class
.img-fluid {
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}

Extend an element beyond the bootstrap container

I'm currently working on one of mockups with using Bootstrap 4 and there's one uncommon element inside the container, which background is extending beyond container. Not sure how exactly this thing should be done. I was trying to implement it with position: absolute, but I'm not a fan of it because of broking responsivness in that case.
The problematic element is "Watch the video" text with background.
Would appreciate any help. Thanks.
/* VIDEO */
.video {
padding: 70px 0;
position: relative;
}
.video .video-wrapper p {
font-size: 14px;
line-height: 30px;
font-style: italic;
margin-top: 10px;
}
.video .description-wrapper h3 {
font-size: 20px;
line-height: 25px;
}
.video .description-wrapper .box {
padding: 10px 15px;
}
.bg-colored {
color: #fff;
background-color: #0b3b52;
}
<!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">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Videos</title>
</head>
<body>
<section class="video">
<div class="container">
<div class="row">
<div class="col-md-5 video-wrapper">
<img src="https://i.imgur.com/mVWlLQt.png" class="img-fluid" alt="">
<p>Name video 5:45</p>
</div>
<div class="col-md-7 description-wrapper">
<div class="row align-items-center">
<div class="col-md-6 box">
<h3>Keep your club organized online,
we save time and energy for you!
</h3>
</div>
<div class="col-md-6 box bg-colored">
<h3>Watch the video</h3>
</div>
<div class="col-md-12">
<p>
Managing a team could also be a hassle free and easy activity.
CRM42 is a web based platform with a user friendly interface, offering a comfortable and profitable experience while using it. Create your new management strategy and focus on getting the best results.
Your goal is now our goal!
</p>
<p>
CRM42 gives you a complete solution with a 360-degree view of your players, including complete management of their contracts, injuries, medicals, offers, past teams, even family members, bank accounts and all sponsors information.
Accessible for your entire staff, anytime from anywhere.
</p>
<p>
Let’s make something awesome together!
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<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>
Basically, this has already been answered, but I will answer since Bootstrap 4 flexbox is different than the other 3.x answer.
It can be done with pseudo element that extends outside the column:
https://codeply.com/go/tXGn5pdD4A
.bg-colored:before {
right: -999em;
background: #0b3b52;
content: '';
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}