i have image and text like this image
When width logo image is correct Text is center , its is work
But when i have image box shape like bellow
TEXT not center, how to fixed text center without deppends image width ??
this is my code..
<div class="row">
<div class="col-12 mb4" style="display: flex; display: -webkit-box;margin-top:30px; ">
<th><img style="max-width: 100%; height: auto;" t-att-src="'data:image/png;base64,%s' % to_text(logo)"/></th>
<h4 style="margin-top:60px;margin-left:140px;font-size:40px;font-weight:bold;width:600px;text-align:center;"><th><span t-esc="nama_ou"/></th> </h4>
<!-- <h4 style="max-width:450px;margin-left:500px;overflow-wrap: break-word;font-size:30px;"> <th><span t-esc="operating_unit"/></th> </h4> -->
</div>
<div class="col-9 text-right" style="margin-top:22px;" name="moto"/>
</div>
Plis help, i stack about this, Thanks
You need to change in your html structure. Use below html and check it.
<div class="row">
<div class="col-12 mb4" style="display: flex; display: -webkit-box;margin-top:30px; ">
<div><img style="max-width: 100%; height: auto;" t-att-src="'data:image/png;base64,%s' % to_text(logo)"></div>
<h4 style="margin-top:60px;margin-left:140px;font-size:40px;font-weight:bold;width:600px;text-align:center;">
<span t-esc="nama_ou">
</h4>
<!-- <h4 style="max-width:450px;margin-left:500px;overflow-wrap: break-word;font-size:30px;"> <th><span t-esc="operating_unit"></th> </h4> -->
</div>
<div class="col-9 text-right" style="margin-top:22px;" name="moto"></div>
</div>
Related
I have a div which has a background image and some text and I want the content of div to stop overlapping from a part (ribbon part) of the backgrounf image. Please check images so that it's clear to you what I am willing to do.
This is how it should appear on all screens (except phones)
This is not how I want it to be. I want the text to stay away from ribbon for all screen sizes
Html:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span>
overview
</h3>
</div>
</div>
</div>
css:
#overview1 {
background-image: url("ribbon.jpg");
background-position: 10% 100%;
background-size: cover;
background-repeat: no-repeat;
color: white;
}
I would do it a bit differently if I were you. Instead of setting the background-image on the #overview-1, I would make two columns (put the image inside the left column and put the text inside the right column).
It would be easier to help you if you edit your question and add more HTML & CSS. Also, having a similar image (at least) would be very helpful to test the snippet.
Something like this:
<div id="overview1" class="col-md-4">
<div class="row d-flex align-items-center height-33">
<div class="col-lg-4 col-md-5 d-sm-block d-none"></div>
<div class="benefits col-lg-8 col-md-7">
<div class="row">
<div class="col-6">
<!-- Image here -->
</div>
<div class="col-6">
<h3 class="text-uppercase overview1-heading ms-3">
<span class="overview1-text">2023</span>
<span class="overview1-text">benefits</span> overview
</h3>
</div>
</div>
</div>
</div>
</div>
I am facing a problem in which I want the content which is written on the left half of the screen should be written on the image which is on the right side when decreasing the screen size.
for reference, check the image as I want this problem image
to be like this Solution image when I decrease the size of my screen, But my screen looks like this at present. I need the solution as soon as possible.
Note: I used mostly pre-defined classes of bootstrap4 for this.
code is-
<div class="row">
<div class="col p-0 col-6 bg-creame" style="height: 100vh;">
<div class="h-100 d-flex flex-column justify-content-start pt-5">
<div class="m-5 pt-5 pr-5">
<h1 class="mb-5"><b style="font-weight: 900;"><b>Contact</b></b></h1>
<p class="m-0" style="font-weight: 900;font-size: 18px;">Email Address</p>
<p><a style="color: inherit !important;font-size: 23px;" href="mailto:support#regid.ca">support#XXX.com</a>
</p>
<p class="m-0 mt-5" style="font-weight: 900;font-size: 18px;">Mailing Address</p>
<p style="font-size: 23px;">
XXXXXX, 77 XXXX XXX X,
XXXXXX, XX XXX 6XX
</p>
<div class="d-none d-lg-block">
<button class="text-uppercase btn pr-5 pl-5 color-creame bg-orange"
style="border-radius: 50px; letter-spacing: 1px;font-size: 20px;">
Contact Us
</button>
</div>
</div>
</div>
</div>
<div class="col p-0 col-6 bg-orange" style="height: 100vh;">
<div style="position: absolute; bottom: 0; right: 0;">
<div class="h-50 bg-orange d-flex flex-column justify-content-end" style="padding-top: 14rem;">
<div class="text-center p-4">
<i class="fas fa-arrow-up bg-black" style="font-size: 2rem;"></i>
</div>
</div>
</div>
<div class="d-flex flex-column h-100">
<img height="100%" width="100%" src="./assets/img/Rectangle 8 (2).png" class="img img-responsive">
</div>
</div>
</div>
You could use z-index to push the image behind the text and do something like this
#media (max-width: 600px) {
img {
width: 100%;
z-index: -1;
}
div {
z-index: 1;
}
}
The cards html looks like this:
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1</b>
</h1>
</div>
</div>
</div>
</div>
and it creates:
The background color for both the card and the card body is set in a css sheet to white with an opacity of 0.4. As you can see the width of the card is bigger than the width of the image and the card body. If i remove the row related classes from this, they are the same size however this will not work as they stack vertically. I cannot use a card deck because i want these to have a fixed width and be horizontally scrollable which doesn't seem to work with a card deck. How can I make the width of the card match the width of the image and body?
The cards should be placed inside columns.
"Rows are wrappers for columns. Each column has horizontal padding
(called a gutter) for controlling the space between them... "
Also...
"When building grid layouts, all content goes in columns. The
hierarchy of Bootstrap’s grid goes from container to row to column to
your content. "
You don't want to...
Use a col-* without a row as it's immediate parent.
Place content directly inside the row.
Regardless of how you use the grid classes (correctly or incorrectly), in your case the source of the space is padding BS applies to .card.
You can add .p-0 to the .card or otherwise set the padding to zero on the element. In the snippet below I have added .p-0 only to the first card for comparison:
div.container-fluid {
background-color: DarkSlateBlue;
}
div.card,
div.card-body {
background-color: rgba(255, 255, 255, 0.4);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container-fluid">
<img src="http://clipart-library.com/img/1279251.png" style="max-width: 100px; filter: invert(1); float: left">
<h1 style="color: white;">Favourite <br>apps </h1>
<div class="row flex-row overflow-auto flex-nowrap" id="favourites" style="max-height: 400px">
<div tabindex="0" class="card p-0" style="max-width: 18rem;" id="ytdroid2">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 2 .card.p-0</b>
</h1>
</div>
</div>
<div tabindex="0" class="card" style="max-width: 18rem;" id="ytdroid">
<img src="https://tse2.mm.bing.net/th?id=OIP.qHEnapkicCACp91KvwDYUAHaFj" class="card-img-top">
<div class="card-body" style="height: 200px;">
<h1 class="card-title" style="color: white;">
<b>Test 1 .card</b>
</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
I have div like this:
<div class="card">
<div class="text-center" style="background-image: url('/public/images/nano.jpg');width:100%;height:100%;height: 115px;background-size: cover;background-repeat: no-repeat;">
<span class="styleRankingBlue px-2 text-white"></span>
</div>
<div class="card-img-overlay text-center d-flex flex-column justify-content-center">
<p class="card-text mb-0 pt-1">
<b>
</b>
</p>
</p>
<p class="card-text mb-0">
</p>
</div>
</div>
So I tried adding width:100%;height:100%; to the background image but it loads like this:
And if I say height: 115px; this will happen:
However I need to load it like this:
[![enter image description here][3]][3]
So how to properly do this with CSS?
Play with the height and width inside your img tag
<img src="https://i.stack.imgur.com/pdNEU.jpg" height="307px" width="309px">
I have a problem with some cards I've made with Bootstrap. Here's the code:
formacion {
color: white;
position: relative;
}
.formacion .puesto {
position: relative;
z-index: 1;
}
.formacion .puesto img{
margin-top: 10px;
}
.formacion .empresa {
width: 100%;
position: absolute;
top: 52px;
background: rgb(255, 255, 255);
color: #000;
z-index: 0;
}
<div class="col-md-4 col-sm-4">
<h2>Formación<br><small>Experiencias académicas destacadas</small></h2>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #8224e3">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-14.50.26-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Ingeniero en informatica</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e688ff">
<h4 class="text-center col-sm-offset-3">Universidad<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-09-2004 - 01-04-2011 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
<div class="col-md-12 capsula-formacion">
<div class="formacion row" style="background-color: #81d742">
<div class="col-sm-3 col-md-3 puesto">
<img src="http://jdlcgarcia.es/wp-content/uploads/2016/10/Captura-de-pantalla-2016-10-17-a-las-15.41.22-150x150.png" alt=" # " title=" # " class="img-circle img-responsive center-block">
</div>
<div class="col-sm-9">
<h3 class="text-center">Curso 1</h3>
</div>
<div class="col-sm-9 empresa" style="background-color: #e5ffa6">
<h4 class="text-center col-sm-offset-3">La institución<br><small></small></h4>
<div class="row-fluid text-center col-sm-offset-3">
01-10-2016 - 31-10-2016 linea1
<br> linea2
<br> linea3
<br>
</div>
<div class="row-fluid">
</div>
</div>
</div>
</div>
This code makes my divs look like this:
When they have to show like this (achieved by adding a fixed height to .capsula-formacion, but I don't want to put it because some of the divs could be longer than others):
I have always the same problem when I'm using absolute positioning so I'm assuming I'm doing it wrong. Which's the way to achieve my desired layout? Thank you in advance!!
Don't put absolute position in content div. You can manage image by position absolute.
You can set image by minus position and also you can set image width and height.
In responsive view you can manage image width and height by break point(Media query css).