I am using Bootstrap 5 to build a webpage. My html code is as following:
<!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">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Homepage</title>
</head>
<body>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
</body>
</html>
I want to make the <h1> and <span> appear in the same line, rather than one below the other, but am unable to do so. Please help me.
The updated code is as below:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center justify-content-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success ms-3">2020-21 period</span>
</div>
Explanation:
Add class d-flex to make h1 and span in same line.
Add class align-items-center justify-content-center to make them center.
(Optional) Add margin by class ms-3 to the span div to add space between h1 and span
you can use row class and col class like this
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-4">Employee details</h1>
<span class="col-4 badge rounded-pill bg-success">2020-21 period</span>
</div>
</div>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-3">Employee details</h1>
<p class="col-3 offset-1 badge rounded-pill bg-success">2020-21 period</p>
</div>
</div>
In a row there are 12 columns. Change the col-3 number to increase or decrease the number of columns that you want to fill.
The offset-1 is the space between the actual column and the previous. The number of the offset works exactly the same.
what you need is a display:flex and align items: center which using bootstrap can be done by the following:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
Note that if you need a gap between your span and your h1 you either need to give a margin-right to your h1 or margin-left to your span. If you want your h1 & span to be positioned in the middle of the div you need to add justify-content-center
Related
I am currently new in bootstrap5 and i am having whitespace problems on my left side when its on full screen its all fine but when I am testing responsiveness the whitespace on the image never leaves.
I have tried the overflow and setting height and width but it still doesn't occupy it. help is highly appreciated as i am new with Bootsrap
<!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>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="supertest.css">
</head>
<body>
<div class="container-fluid g-0 m-0 p-0 ">
<div class="row g-0">
<div class="col-8 g-0 m-0 p-0">
<img src="backgroundleft.jpg" alt="leftbg" class="img-fluid h-100 w-100">
</div>
<div class="col-4 overflow-hidden d-flex flex-column">
<div class="text-center pt-5 mb-2">
<img src="PUPLogo.png" alt="" class="w-25">
</div>
<h1 class="text-center">Reg<span>iTech</span></h1>
<h2 class="px-5">Login</h2>
<form>
<div class="form-group px-5 mb-3">
<input type="text" class="form-control" id="username" placeholder="Username">
</div>
<div class="form-group px-5">
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="d-flex justify-content-center mt-3">
<button type="submit" class="btn w-50 ">Submit</button>
</div>
</form>
<div class="mt-3 text-center">
don't have an account yet ?
</div>
<div class="row text-center mt-auto">
<div class="copyright">
Copyright#2022 | RegiTech | Developed DICT 3-1
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
One solutions could be to remove the image as an elements and add it as a background image via CSS to style the container itself. Then, using some aspect ratio magic with object-fit: cover; You should be able to set a responsive background image which scales.
Example Here: https://jsfiddle.net/fatchild/r70gLwu3/53/
The idea is that you want the container to never show white space so you set the background image of that container to the image and make sure the image is 100 viewport width and height. This might cause the image to distort if it was forced to be the height and width of the container. To remedy this, the object-fit declaration will make sure the most appropriate part of the image is shown without distorting the aspect ratio or causing white space.
Remove the img element
Add new id to the container element id="bg-img"
Set some new declarations for that id attribute
#bg-img {
object-fit: cover;
background-image: url("http://uniacco.com/blog/wp-content/uploads/2019/12/shutterstock_1062917057.jpg");
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
Remember that local resources will not render on other peoples machines. So when posting an example make sure to link a random image from the internet, as you it will render on other people's local machines when they try to run your code.
I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and col-md-8 to the text, how to hide the col-md-4 section on the small screen and let the col-md-8 cover the whole section? iam using bootstrap 5
the code:
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4"></div>
<div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
the output on desktop:
the output on phones:
To hide element on particluar screen breakpoint use .d-sm-none .d-md-block
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4 .d-sm-none .d-md-block"></div>
<div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
this will leave layout as you defined for md screens and hide firs div and make second div 12 cols wide on sm screens.
Recently, I'm developing using bootstrap for a chatting system. But publishing a job is very difficult for me.
I want to develop the message template using bootstrap. I'm only using a bootstrap grid system.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="lib/bootstrap.min.css" />
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="lib/bootstrap.min.js"></script>
<div class="container-fluid">
<div>NickName</div>
<div class="row flex-nowrap">
<div class="col-auto" style="background-color: beige;">
<div class="row flex-nowrap">
<div class="col-auto">
<div class="text-break">
FileName : sddfssfdsdfsfdsdfsfddssdffdssfdsdfsdfsfdsdffdsfsdfsdsfdssfdsdfadsasdadsadsadsdasadsadsdaadsasdasds
</div>
<div>
SIZE
</div>
</div>
<div class="col-auto align-self-center">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto align-self-center text-nowrap">
PM 7:32
</div>
</div>
</div>
</body>
</html>
I want to show all contents when class is set to flex-nowrap. But above code is not working well.
If I reduce browser size in the above code, then the image tag and PM7:32 are hidden.
I don't know what to do. I want to show the following picture always.
You need to play with class col and col-auto inside row structure and use text-break class for braking single line text without spaces.
I hope this below snippet will help you a lot.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css">
<div class="container-fluid">
<div>NickName</div>
<div class="row">
<div class="col-12">
<div class="row flex-nowrap align-items-center">
<div class="col">
<div class="row flex-nowrap align-items-center rounded py-2" style="background-color: beige;">
<div class="col">
<div class="text-break">
<strong class="float-left mr-1">FileName:</strong> sddfssfdsdfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsdfdsdffdsfsddsdffdsfsddssfdsdfsdfsfdsdffdsfsddffdsfsdfdsdfdffdsfsdfdsdf-Last Text
</div>
<div>
<strong>Size:</strong> 100kb
</div>
</div>
<div class="col-auto">
<img src="./images/ic-download-doc-nor.png"/>
</div>
</div>
</div>
<div class="col-auto text-nowrap">
PM 7:32
</div>
</div>
</div>
</div>
</div>
"d-flex" is important. You can try:
<div class="d-flex flex-nowrap">
...
</div>
I am trying to create 2 flexbox containers one after the other, I have applied a number of classes combination to make this work. Flexbox gets created but when I scroll, the lower one goes below upper one. The output is as shown here: Current Scenario Output.
My requirement is those 2 horizontal bars to be fixed and one after another, irrespective of scrolling.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'personal/mystyles.css' %}">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center pt-1 px-md-4 mb-3 border-bottom shadow-sm sticky-top" style="background-color: #80ccff;">
<h5 class="my-0 mr-md-auto font-weight-normal">
<p>Hello, User </p>
</h5>
<nav class="my-0 my-md-0 mr-md-3">
<a class="p-2 text-dark" href=""><b>Home</b></a>
<a class="p-2 text-dark" href=""><b>Account</b></a>
<a class="p-2 text-dark" href=""><b>Logout</b></a></p>
</nav>
</div>
<!--This div will be used in different html file and first div will be included using 'include' keyword of django. -->
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa;"></div>
</body>
</html>
You can change your second horizontal bar like this and add some css:
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa; position: fixed; width: 100%; margin-top: 50px"></div>
Wrap 2 divs that you want side by side inside a div and make it flex
<body>
<div class="d-flex">
<div>...</div> // your first div
<div>...</div> // your second div
<div>
</body>
I'm trying to center a FontAwesome icon in the center of an Image Overlay Card and I'm being unable to center it vertically.
I've tried multiple other suggestions such as using d-flex and justify-content-center but none seem to work. What am I missing?
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
</head>
<body>
<div class="card bg-dark text-white">
<img class="card-img" src="http://placehold.jp/500x200.png" alt="Example">
<div class="card-img-overlay text-center">
<i class="fab fa-youtube fa-5x" style="color:#FF0000"></i>
</div>
</div>
</body>
I want the icon to be centered in the middle of the image, but can only align it horizontally and not vertically. Thank you for your help.
You can add d-flex class to your .card-img-overlay element, then add class="align-self-center mx-auto" to the inner a element:
<div class="card bg-dark text-white">
<img class="card-img" src="images/example.jpg" alt="Example">
<div class="card-img-overlay d-flex">
<a class="align-self-center mx-auto" data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">
<i class="fa fa-youtube fa-5x zoom" style="color:#FF0000"></i>
</a>
</div>
</div>
More info about align-self-center on official BS4 doc: https://getbootstrap.com/docs/4.3/utilities/flex/#align-self
You can use bootstrap flex utilities class on card-img-overlay element :
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<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">
<div class="card bg-dark text-white">
<img class="card-img" src="https://fakeimg.pl/250x100/000000/" alt="Example">
<div class="card-img-overlay text-center d-flex flex-column justify-content-center">
<a data-fancybox href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" class="">
<i class="fab fa-youtube fa-5x zoom" style="color:#FF0000"></i>
</a>
</div>
</div>
Your first attempt was correct (Adding d-flex and justify-content-center class). You just forgot to also add align-items-center class.