Changing color of a bootstrap card header - html

I have in my application a bootstrap card with a header, which looks like this:
As a code I used:
<div class="card">
<div class="card-header card-header-warning">
<h4 class="card-title">Blah blah</h4>
</div>
<div class="card-body">
</div>
</div>
But I don't want to use the in bootstrap defined colors (like primary, warning, success...), I want to use other colors like cyan or bordeaux (in GRB fromat or HEX, just not bootstrap).
How may I implement this?
I tried with defining an ID in the div like this:
<div class="card-header card-header-warning" id="card-header-color">
And in my css I had:
#card-header-color {
background-color: cyan;
}
But nothing has changed.
Then I deleted the "card-header-warning" part, but then the styling was also gone (look at the picture), so I just need a way to change the color, without having to style the header again.
I'd be really happy, if you could help me.

Make sure that your css file attached after bootstrap css file on the head tag
Try like this .card > .card-header-warning{background: cyan}
still issue there ?
Make sure that your piece of code is at the end of the style sheet
still issue there ?
Try the forced override .card-header-warning{background: cyan!important}

You can try to only override the color by using the !important rule.
you code will become:
#card-header-color {
background-color: cyan !important;
}
and
<div class="card-header card-header-warning" id="card-header-color">

You can use the !important property to your CSS (normally it should work).
#card-header-color {
background-color: cyan !important;
}

First of all, you shouldn't use IDs to style components. It's not a good practice.
Also, you can just color the text inside it to match your needs with text-white or whatever. So, your html would look like this:
<div class="card">
<div class="card-header card-header-color">
<h4 class="card-title text-white">Blah blah</h4>
</div>
<div class="card-body">
</div>
</div>
And your css:
.card-header-color {
background-color: cyan;
}
Looking at the bootstrap documentation, you can also see how to implement the cards the way they are intended to, here is a example of a blue info card.
<div class="card text-white bg-info">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>

Related

Embed an image into div

I'm doing a Django project and I'm using the blog example from Bootstrap 5
I'm trying to embed an image into the first div. So it goes from this:
To this:
It's photoshopped.
How can I do that?
This is the div I'm trying to edit:
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-4 text-white fst-italic">We are opening our 4th location in March 2023</h1>
<p class="lead my-3">Multiple lines of text that form the lede, informing new readers quickly and
efficiently about what’s most interesting in this post’s contents.</p>
<p class="lead mb-0">Continue reading...</p>
</div>
</div>
The full example code can be downloaded from here.
Add a background property to the div:
<div style="background-image: URL('www.server.address/image.jpg');">
</div>
You will want the background property, you can attach a URL to it.
You may then want to Apply a filter to a background image
.headerObject {
height: 100px;
width: 300px;
background: url("https://cataas.com/cat");
background-size: cover;
}
<div class="headerObject">
Hello World
</div>

Bootstrap "Container" inside an <article> tag

I have been adding , and elements to my demo portfolio, just to practice what I've learnt so far, but it seems that these tags mess up the "container" class from bootstrap.
initial version without accessibility tags
<!-- <header> -->
<div class="container">
<div class="hl1"></div>
<div class="row">
<div class="col-12 p-3">
<div class="card mx-auto" style="width: 18rem;">
<img src="./portrait2.jpg" class="card-img-top" alt="My Portrait">
<div class="card-body">
<p class="card-text">Hello there! This is me!</p>
</div>
</div>
</div>
<div class="hl1"></div>
</div>
<!-- </header>
As you can see, I've commented out the tag for the moment. After I add the header, article and footer tags, the content swaps out of the container class and the (hr)tag goes across the total width of the page.
The good part is that the content remains at the same location, like only the (hr)tag would be affected by the tags.
My question is there a way to overcome this? Or I should forget the accessibility tags for now, until I become more advanced in knowledge.
Thanks.
It'd be better if you could provide the entire code. Although, you can check if your Bootstrap CDN link is BELOW the link to your external stylesheet. This makes sure that the Bootstrap properties are prevalent over anything you have defined in your stylesheet.

Why isn't the background image appearing inside my <div>?

I'm trying to put a background image just for this part of my web page, I put my image as an id (fruit) but it isn't appearing. Here is my code:
<div class="p-1 text-center bg-light" id="fruit">
<div class="col-md-6 mx-auto my-5">
<h1 class="display-4 font-weight-normal">TrendyEats</h1>
<p class="lead font-weight-normal">The Latest Food Trends</p>
<a class="btn btn-outline-secondary" href="#">Login</a>
<p class="small pt-4">blablabla </p>
</div>
</div>
and the css for the fruit id is:
#fruit {
background-image: url('/Pictures/fruits.jpg');
alt:"woops";
}
The "alt" also doesn't appear.
Any help is appreciated, thanks!
Edit: Fixed, it appears I had to write "Pictures/fruits.jpg" instead of "/Pictures/fruits.jpg"
You may want to check that your relative link is correct. If I replace that with an external link the background shows up just fine.
You want to add the alt within an img tag in HTML- in your case you don't have this. If you are adding a background image via CSS, you may want to add a solid color as an alternative to display as a backup if your link were to fail.
try to add
#friut {
background-image: url("./Pictures/fruits.jpg");
background-color: #000;
}
also check whether you have correctly linked the css file to the html page.
Please check image url it's working, [I am replaced it with content after #fruit] You can not place alt inside css you need to add on html image because it's html attribute, where you can add or set it with JavaScript.
#fruit {
background-image: url('https://www.w3schools.com/w3css/img_lights.jpg');
}
#fruit:after {
content: " (woops)";
}
<div class="p-1 text-center bg-light" id="fruit">
<div class="col-md-6 mx-auto my-5">
<h1 class="display-4 font-weight-normal">TrendyEats</h1>
<p class="lead font-weight-normal">The Latest Food Trends</p>
<a class="btn btn-outline-secondary" href="#">Login</a>
<p class="small pt-4">blablabla </p>
</div>
</div>

Alignment issues in Bootstrap Containers

I'm currently building my first website in bootstrap 4, and I have some general questions to either which I can't find a good response to or want to know how to handle something... Here it goes:
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
<div class="container-fluid">
<div class="row">
<div class="col-md-3" style="min-height: 0.5rem; background-color: #FBB040"></div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #939598"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #D1D3D4"> </div>
<div class="col-md-3" style="min-height: 0.5rem; background-color: #28AB9E"> </div>
</div>
<div id="outter-div" class="row">
<div id="inner-div-1-logo" class="col-md-3 test"><img src="images/logo.png" class="mx-auto d-block" alt="helloworld" style="width:200px"></div>
<div id="inner-div-1" class="col-md-8">
<div class="row contact-bar text-md-right bg-success"> hello world -- needs to be right-aligned</div>
<!--<div id="contact-bar" class="row bg-success contact-bar"> Call Us # (888) 888-8888 | info#email.com | Customer Portal </div> -->
<div id="nav-bar" class="row nav-bar bg-primary"> nav-bar </div>
</div>
</div>
</div>
I'd love hear some feedback on the approach I am taking to building this based on the code above. Am I headed in the correct direction here? Anything you would do different?
Thank you.
Please use below link to read about Grid System Rules.
Visit https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
After reading the rules you can get started with building your own Html pages using examples given in below link
https://getbootstrap.com/docs/4.0/examples/
Is it common to use multiple container styles throughout a website? I mean is it perfectly okay to have a 'container'in one place and 'container-fluid' elsewhere?
It depends on you. You can use .container and .container-fluid according to your needs. But you can not use in the order shown .container > .row > .column > .container-fluid.
Additionally, I created something very small to see how things would work out. Boostrap provides a class called 'text-md-right' and from what I can tell it should right-align the text. Let me show my sample code. Why is the text in my 'bg-success' not right-aligning?
Yes it'll be aligning right on medium devices only. If you want it for other devices just use .text-right
For reference go through this link https://getbootstrap.com/docs/4.0/layout/grid/

Create a Header in Bootstrap 4 with correctly aligned logo

I'm trying to create a header in bootstrap 4 like this:
I'm facing several problems with this approach. Firstly the logo is not properly centered to the middle. I've tried several methods to avoid this including align=middle, margin on the bottom (which adds more space on the bottom than the space that's already on top-side) and the grid-system with col-1 and col-9. The last one creates to much space between the logo and the heading.
The image includes the version which contains the image in the HTML h1 element. Here is the source to create the logo:
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text
<small class="text-white-50">
The new way of doing text-research</small></h1>
Am I doing something wrong? Bootstrap examples with an included logo are very rare. Maybe it has a reason...
Additional information
The small text shouldn't be centered.
I want to achieve this with bootstrap utilities only.
Use a flexbox for all items. Don't put the image and text inside the h1.
div {
display: flex;
align-items: center/* vertical alignment */
}
small {
font-size: 1rem;
}
<div>
<img src="https://via.placeholder.com/64x64" width=64 height=64 />
<h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>
</div>
Since there is no html posted i am going to assume you have bootsrap basics in place:
Assuming you have something like this
<div class="container-fluid">
<div class="row">
<div class="col-lg-12 header">
<span>
<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64/>
some text
<small>The new way of doing text-research</small>
</h1>
</span>
</div>
</div>
</div>
EDIT: REMOVED CUSTOM CSS
PLease note that having the html in this way is not recommended.
But if you are insistent that you not use any custom css this solution should solve the problem.
I hope this is what you are looking for.
Check updated code pen https://codepen.io/Jsilvestri/pen/vzzJRy