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>
Related
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
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.
Is there an elegant way to create a square card / div using bootstrap flexboxes with minimal custom css and/or using built-in bootstrap properties if at all possible?
My goal is to get this responsive square in the middle of this card based on the minimum width or height of the doms parent with some margin
so basically the square would be of size NxN where
N = Math.min(parentWidth, parentHeight) - (marginSize * 2);
This is what I have
<div class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
url.com
</nav>
<div class="card m-5 h-100 flex-grow-1 rounded-0">
<div class="card small-cards m-5 h-100 flex-grow-1 rounded-0 border-0">I WANT THIS TO BE SQUARE :)</div>
</div>
</div>
This is the solution I was able to come up with that met my needs/wants in case this question picks up In the search results:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css" integrity="sha384-nNK9n28pDUDDgIiIqZ/MiyO3F4/9vsMtReZK39klb/MtkZI3/LtjSjlmyVPS3KdN" crossorigin="anonymous">
<title>url.com</title>
</head>
<body>
<div class="d-flex flex-column min-vh-100">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
url.com
</nav>
<div class="d-flex flex-grow-1 justify-content-center">
<div class="card small-card h-100 flex-grow-1 rounded-0 align-self-center" style="max-width: 85vmin; min-width: 85vmin; min-height: 85vmin; max-height: 85vmin;" />
</div>
</div>
</body>
</html>
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.
i've been struggling with this problem for the past two days. I have a web dashboard which displays charts or table on cards. These cards may have different size depending on which chart or table is rendered inside it. They are inside bootstrap nav tab content.
When i use a defined col size, such as col-md-3 or col-sm-4 or even only col evertyhing works just fine. However, when using col-auto, it "overflows" horizontally beyond the screen, row and even the container.
Below is the presentation code i removed from my angular app
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Bootstrap grid problem</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-11 col-md-11">
<ul class="nav nav-tabs border-0" id="tabMenu" role="tablist">
<li class="nav-item mr-1" *ngFor="let route of routeLinks; let i = index;">
<a class="nav-link" data-toggle="tab" (click)="activeLinkIndex = i" [ngClass]="{ 'active': activeLinkIndex === i, 'text-light': activeLinkIndex !== i, 'bg-azul-escuro': activeLinkIndex !== i,
'bg-cinza-claro': activeLinkIndex === i, 'text-azul-escuro': activeLinkIndex === i,
'font-weight-bold': activeLinkIndex === i }" [routerLink]="route.link">{{route.title}}</a>
</li>
</ul>
<div class="tab-content" id="tabMainContent">
<div class="tab-pane fade show active" id="central" role="tabpanel" aria-labelledby="central-tab">
<div class="row">
<div class="col-lg-12 col-md-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb m-0 bg-light rounded-0 ">
<fa-icon [icon]="faHome" class="mr-2 text-dark"></fa-icon>
<li class="breadcrumb-item">Main</li>
<li class="breadcrumb-item active" aria-current="page">Consolidated</li>
</ol>
</nav>
</div>
</div>
<div class="row bg-light py-3 rounded-top text-white">
<div class="col-auto bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
<div class="col bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
<div class="col bg-dark">
<div class="mx-3">
<p>
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns
will resize no matter the width of the center column.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<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>