Center the SVG in the header using Bootstrap

I utilized a card template from Bootstrap for creating a warning card. The icon at the top of the card is an svg obtained from Bootstrap's icons library . On that page, you can find examples of how the icon should be aligned properly. However, in my implementation, the icon appears at the bottom and is not centered correctly. Is there a way to resolve this alignment issue?

 <div class="card" style="width: 18rem;">
    <div class="card-body">
                <div class="mb-3">
                    <h5 class="card-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                            <path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                        </svg>
                        Warning
                    </h5>
                </div>
                <p class="card-text">
                    Text of card
                </p>

  </div>
</div>
htmlcssbootstrap-4

Answer №1

To make adjustments, utilize a negative margin-top.

Here is an example:

 <div class="card" style="width: 18rem;">
<div class="card-body">
            <div class="mb-3">
                <h5 class="card-title">
                    <svg class="myIcon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                    </svg>
                    Alert
                </h5>
            </div>
            <p class="card-text">
                Content of card
            </p>
        </div>
    </div>

CSS:

.myIcon { margin-top: -7px; }

Take a look at the code snippet here: https://jsfiddle.net/63tw89bk/

Answer №2

print("%d\n", 42); /* An example of adding CSS in the style section: */

   .card-svg {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .card-txt{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }

/*These styles can be added as classes in your HTML code like this: */

<img class="card-svg" src="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                              <path fill-rule="evenodd" d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 5zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"/>
                          <img>
 <h5 class="card-txt">Warning</h5>

/Additionally, I converted the svg to an img tag for demonstration purposes. Feel free to experiment with different elements./

Answer №3

View My Outcome

To center the first DIV, simply add the style text-align: center. Refer to the image above to ensure it displays as desired. Give a thumbs up if it works for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can a Unicode character be overwritten using a specific method?

Is there a way to display a number on top of the unicode character '♤' without using images? I have over 200 ♤ symbols each with a unique number, and using images would take up too much space. The characters will need to be different sizes, a ...

javascripthtmlcss

The benefits of utilizing "native tags" instead of foreignObject in an SVG

As the creator of the stackoverflow-readme-profile project, I dedicated extensive time and effort to crafting a personalized Stackoverflow profile in the form of an SVG image. Utilizing "native svg tags," I meticulously constructed elements such as: < ...

htmlcsssvg

What is the best method for accessing data values from HTML within a JavaScript function?

Greetings, I am relatively new to using jquery and ajax. Here is a snippet of my code: .html <li class="list-group-item"> <h2>Vocabulary</h2> <h4> <span class="label label-success">Like Name</span& ...

javascriptjqueryhtmlajax

Pager made the bold decision to transition from a horizontal layout to a vertical format

I've been feeling frustrated lately. After being sick for a while, my customer called to inform me that the gallery pager on their website is broken. Although I managed to fix most of it and restore the original style, I'm struggling to get it t ...

csswordpresspager

What is the best way to display a background image within my div element?

I'm trying to create my first child inside the div.missions, but it's not displaying. The only thing showing is the background color of the second child. Can someone assist me with this issue? Let me share my code with you: Here's my HTML: ...

htmlcss

What could be causing my submit button to fail to send form data? - Issues with HTML/Node

Currently, I have a straightforward form set up for individuals to sign up for a waiting list for my product. However, I'm encountering an issue where the form is not submitting. The application is running smoothly on localhost:3000. The page loads c ...

html

Align multiple elements in a responsive fixed container

I have been attempting to center multiple elements, including images and buttons, within a fixed div at the top of the screen. Despite trying various tricks I found online, none seem to be effective. My goal is to ensure that the alignment works seamlessly ...

javascriptjqueryhtmlcssnavigation

Is there a way to achieve horizontal alignment for the Twitter and Facebook buttons on my page?

By utilizing the html code provided, I successfully incorporated Twitter and Facebook "Like" buttons into my website. Initially, they were stacked vertically, which resulted in excessive use of vertical space. To optimize space usage, I decided to align th ...

javascripthtmltwitterfacebook-like

Applying a CSS border to a div that perfectly encloses a span, adjusting to the

My goal is to create a nested structure where a div contains a span element like this: ---------- |Sentence| ---------- ----------------- |It's a looooong| |sentence | ----------------- While it works well for short sentences, long ones end u ...

htmlcss

Connecting users from a mobile website to a particular item within the Amazon application

Recently, I've been working on linking from my mobile site to a particular item within the Amazon app. My JavaScript code includes a try/catch block that redirects users to the webpage if they don't have the app installed. However, I've foun ...

javascriptjqueryhtmliosurl

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

cssreactjsresponsive-designmaterial-design

An error occurs when trying to access data from the cities of a specific state. The error message reads: "Unable to retrieve property 'data

An error occured: Cannot read property 'data' of undefined at Object.city The issue I am facing is that I am dynamically calling the state parameter. When I use cities.UP.data, it displays the correct result. However, when I try to add cities.st ...

javascriptjqueryhtml

The functionality of aos.css seems to be malfunctioning on a Django-powered website

I recently set up a django backend website and attempted to incorporate CSS in my HTML using the following code snippet. {% load static %} <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-wid ...

cssdjangoaos.js

Improved explanation of DOM elements in raw JavaScript

Is there a more efficient way to dynamically create this DOM block: <tr> <td>text</td> <td><input type="checkbox"></td> </tr> I have a function that adds a nested tr element to my tbody: function inse ...

javascripthtmldom

Obtain the value of the background image's URL

Is there a way to extract the value of the background-image URL that is set directly in the element tag using inline styling? <a style="background-image: url(https:// ....)"></a> I attempted to retrieve this information using var url = $(thi ...

javascriptjqueryhtmlcssmongodb

What is the method for passing an element in Angular2 Typescript binding?

Is there a way to retrieve the specific HTML dom element passed through a binding in Angular? I'm having trouble figuring it out, so here is the relevant code snippet: donut-chart.html <div class="donut-chart" (donut)="$element"> ...

htmlangulartypescript

The PHP script is failing to load the Bootstrap and CSS files in the HTML document

I developed a PHP application that functions as a plugin within a WordPress site. The application is located in the wp-content/plugins folder and is named SW. Within this folder, there are files like index.php and related folders containing bootstrap and C ...

phphtmlcsswordpressbootstrap-4

The only functional button in the table is the one located on the top row

My MVC Application is encountering an issue with only the first item in the table working perfectly, while the rest are not calling the method. Despite my extensive research, I have been unable to resolve this issue. Below is the code on my view. Can someo ...

htmlasp.net-mvcc#-3.0

``I am experiencing an issue with the framework7 slider range feature not functioning properly on the

Issue with framework7 slider range not functioning in Google Chrome but working in other browsers. https://i.sstatic.net/ItY8U.jpg Here is the code snippet: <div class="item-content"> <div class="item-media"><i class="i ...

javascripthtmlcssgoogle-chromehtml-framework-7

The "if" statement carries out the identical action each time it is executed

Despite my efforts to toggle the value of the turn variable every time the if statement runs, I keep encountering the same outcome. It appears that turn consistently evaluates as 2. Below is the code snippet in question: $(function() { var turn = 2; ...

javascriptjqueryhtmlcssif-statement