CSS Circle Behind Image Taking Up Full Container Width - html

I'm trying to get a circle behind a logo using CSS but struggling as it keeps taking up the whole width of the container.
https://jsfiddle.net/leelawtondesign/hfqk6a0g/5/#&togetherjs=HAg4AK4vSo
This is how it looks...
This is how it is meant to look...
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-12 col-md-3 my-auto order-2 order-md-1">
<div class="pt-5 pt-md-3 d-flex justify-content-center">
<div class=""></div>
<button type="button" class="btn btn-social-icon btn-facebook btn-rounded mx-2"><i class="fa fa-facebook"></i></button>
<button type="button" class="btn btn-social-icon btn-twitter btn-rounded mx-2"><i class="fa fa-twitter"></i></button>
<button type="button" class="btn btn-social-icon btn-instagram btn-rounded mx-2"><i class="fa fa-instagram"></i></button>
</div>
</div>
<div class="col-12 col-md-6 order-1 order-md-2 logo d-flex position-relative">
<img class="pt-3 pt-md-5 pb-4 pb-md-5 m-auto align-content-center" src="img/safety_first_logo.png">
</div>
<div class="pt-3 pt-md-0 col-12 col-md-3 text-right my-auto order-3 d-flex justify-content-center justify-content-md-end">
<i class="fas fa-phone px-2"></i> 07460162247
</div>
</div>
</div>

Related

Fill row content with an image keeping the size

My problem is in containing the images within a bootstrap row. When I add the image this is not contained adapting to the size of the row but for some reason it follows its size by activating the scroll.
I would like the image to fit into the container without causing scrolling when resizing the image.
This is the correct behavior when not adding any elements in the row:
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
While this is the behavior when I add an image:
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You can use a trick sizing image to an height of 0 and a min-height of 100%
style="height:0;min-height:100%;" or via a custom class (better practice)
idea:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 mh-100 pt-3 ps-3 pb-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 ">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive px-0 rounded" style="height:0;min-height:100%;" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Another possibility is also to set a max-height on the conatiners
other possible example:
.max-vh-100{max-height:calc(100vh - 2em);}/* takes into account : pt-3 p-s3 pb-3 that could be turned into p-3 */
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row justify-content-center min-vh-100 p-3">
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 max-vh-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded " slot="1">
<img class="img-responsive w-100 h-100 px-0 rounded" src="https://www.logo.wine/a/logo/Stack_Overflow/Stack_Overflow-Logo.wine.svg">
</div>
</div>
</div>
<div class="col" style="background-color: rgba(0,0,0,.03);">
<div class="d-flex flex-column h-100 max-vh-100">
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
<div class="row flex-grow-1 h-50 slot border border-3 rounded" slot="1">
<div class="container-fluid d-flex " style="background-color: rgba(0,0,0,.03);">
<div class="align-self-center mx-auto">
<button type="button" class="btn btn-xs btn-icon btn-round btn-light new-stream-btn" slot="1">
<i class="fa fa-plus text-dark"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.max-vh-100{max-height:calc(100vh - 2em);}takes into account : pt-3 ps-3 pb-3 that could be turned into p-3

Bootstrap 5 Tabs is not opening correctly

I want to make Vertical bootstrap tabs but when I tried to use the code from bootstrap 5 docs I faced a problem when opening the tabs as you can see in the screenshot the tabs are showing next to each other when I switch between them so what I'm missing in this
]
code
<div class="d-flex align-items-start center rounded" style="direction: rtl;">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="btn btn-lg btn-primary" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home"
type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="btn btn-lg btn-primary dflex" id="v-pills-profile-tab" data-bs-toggle="pill"
data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile"
aria-selected="false">Store</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="container contain bg-light rounded">
<div class="row" style="direction:rtl;">
<h4 class="title" >Home</h4><br>
</div><hr />
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">إجمالي الأرباح :</span>
<span class="spanValue" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-credit-card iconstate"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="direction:rtl;">
<div class="card cashIncom shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:750px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="spanIncome">المصروفات :</span>
<span class="spanValuespent" id="spanIncomeValue">500$</span>
<i class="fa-solid fa-dollar-sign spenticon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap 5 flex container d-flex wrap not functioning as expected

I'm trying to use bootstrap 5 class d-flex align-content-around flex-wrap to draw a number of cards in this shape
Unfortunately, it is not working and the cards stay in this shape
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<div class="containr d-flex align-content-around flex-wrap" id="containe">
<div class="row" id="${id}" style="direction:rtl;">
<div class="card itemHolder shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:650px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="ProductName">${name}</span><br><br>
<span style="font-family: boto; font-size:15px; position: absolute; right:13px;">السعر:</span>
<span class="ProductPrice">${price}</span>
<i class="fa-solid fa-tags iconproduct"></i>
</div>
</div>
</div>
<button type="button" class="btn btn-success" style="font-family:hana; font-size:15px;">شراء</button>
</div>
</div>
<div class="row" id="${id}" style="direction:rtl;">
<div class="card itemHolder shadow-lg p-3 mb-5 bg-white rounded">
<div class="card-body" style="width:650px;">
<div class="mb-1">
<div class="d-inline-flex align-items-center">
<span class="ProductName">${name}</span><br><br>
<span style="font-family: boto; font-size:15px; position: absolute; right:13px;">السعر:</span>
<span class="ProductPrice">${price}</span>
<i class="fa-solid fa-tags iconproduct"></i>
</div>
</div>
</div>
<button type="button" class="btn btn-success" style="font-family:hana; font-size:15px;">شراء</button>
</div>
</div>
</div>

Getting button to align center in Bootstrap card footer

I am using Bootstrap 5.1.3 and trying to get a button to center in the footer of a card. Here's the code I'm using:
CSS
.btnStandard {
min-width: 10vw;
}
HTML
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
Nothing I've tried will let me center the button in the card footer. Any thoughts?

Try this as well:
<div class="card-footer mx-auto justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-
content-center btnStandard">
<div class="col-10 text-center">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i>
</div>
</button>
</div>

Here you go... You forgot to add d-flex.
Change this...
<div class="card-footer justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>
...to this.
<div class="card-footer d-flex justify-content-center">
<button type="button" class="btn btn-labeled btn-success d-flex justify-content-between btnStandard">
<div class="col-10 text-start">Tell Me</div>
<div class="col-2 text-center"><i class="fa-solid fa-square-info"></i></div>
</button>
</div>

Float <i> to the right of <div> in html

I want to align this <i> to the right side in my <div>. This is my html code:
<div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-center">
<h2>Heading</h2>
<span class="badge rounded-pill bg-success ms-3">Welcome</span>
<i class="fas fa-question-circle" style="float: right;"></i>
</div>
The above code is not working. What can I do to fix this?

Change HTML This Way
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-1 bg-primary text-white d-flex align-items-center justify-content-between">
<div class="justify-content-center d-flex flex-fill align-items-center">
<h2>Heading</h2>
<div>
<span class="badge rounded-pill bg-success">Welcome</span>
</div>
</div>
<div>
<i class="fas fa-question-circle"></i>
</div>
</div>