Position SVG element within a Bootstrap 4 row

Is there a way to center align both an icon (<svg>) and text within a container with a small spacing between the two elements?

|      ICON TEXT      |

Here is a JSBin link for reference: https://jsbin.com/tatomas/edit?html,css,output

I have Bootstrap 4 (Flexbox) at my disposal, but I'm struggling to achieve this. Particularly, aligning the <svg> seems challenging as I can't seem to move it. I've attempted placing them in a .row with a .col each, yet the SVG remains centered within the column...

Any ideas on how to accomplish this, with or without the BS grid?

csssvgflexboxtwitter-bootstrap-4

Answer №1

There are two crucial adjustments that can be made to enhance the current markup:

  • Reset the predefined paddings in col

  • Align the SVG to the right by using text-align: right

It's worth noting that SVG elements without a set width can cause issues on certain browsers, so setting a width of 80 in the markup is recommended.

You now have the flexibility to add your preferred margin or padding to the col elements (as demonstrated with the section-* elements below). In this example, a margin has been utilized.

Alternatively, you can remove the col elements and apply the built-in class justify-content-center to the row element (

<div class="row justify-content-center">
)

The main distinction between these approaches lies in how the icon/title group alignment is handled within their parent element.

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

Incorporate CSS styling from a separate .css file into a material component

Just starting out with material UI. I have a css file that looks like this: .bgItem { font-size: 14px; } My component setup is as follows: <MenuItem key={status.Id} value={status.Value} classes={css.bgItem}> {status.Description} </Men ...

javascriptcssreactjsmaterial-ui

Tips on adjusting the SVG view box for optimal visibility in a web browser

Recently, I've encountered an issue with the following code snippet: d3.xml("https://crossorigin.me/https://svgshare.com/i/5w9.svg").mimeType("image/svg+xml").get(function(error, xml) { if (error) throw error; document.body.appendChild(xml.docume ...

csssvg

JavaScript date selector allowing the selection of multiple dates

As a beginner in JavaScript, I am struggling to create a datepicker input field that allows multiple selections. Despite researching for solutions, none seem to fit my specific case. Can anyone offer guidance on how to achieve this? Your help is greatly ap ...

javascriptcsshtmltwitter-bootstrap

AngularJS: Creating a dual-column layout with alternating styles

Struggling to create a two-column layout that repeats in AngularJS using a JSON object of image data. I'm aiming for a display of images in a side-by-side format, but my odd/even logic seems to be off no matter what adjustments I make. Can anyone poin ...

cssangularjsonsen-uiresponsive

Exploring the art of CSS box-shadow and playing with margins

In one of my blog posts, I've applied CSS box-shadow to the <img> elements. To ensure that they adjust their size along with the column, I have set max-width:100%. However, the box-shadow spills over into the margins due to its rendering outsid ...

layoutmargincss

Ways to conceal a primary page section upon clicking a different tab

I am currently implementing the w3schools HOW TO - tabs feature on my website to create tabbed navigation. However, I'm running into an issue where clicking on tabs other than 'Home' still displays the 'Home' content along with the ...

javascripthtmlcsstabs

Dynamic search bar in Javascript showing empty spaces for cards that are not currently visible

Currently, I am in the process of developing an online learning platform which features a catalog of courses. Users can search for courses based on the titles or descriptions using the search bar. To display the catalog, I have utilized bootstrap cards. Th ...

javascripthtmljquerycssbootstrap-5

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

htmlcss

Guide to navigating to a different webpage with Node.js

I am a beginner user of NodeJS and I have a specific request. I need assistance with setting up a page redirect from one page to another upon clicking on a link. Any guidance provided will be greatly appreciated. Here is the code snippet: app.js var expr ...

htmlcssnode.jsnpmvisual-studio-code

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

htmlcsstwitter-bootstrapvue.js

Ensure that the .md formatting is maintained when using a fresh CSS paragraph selector

I recently added a new selector in the .css file for my Hugo website to implement MLA-style indentation for references. Here is the code snippet: .mla-ref { padding-left: 36px; text-indent: -36px; } Although this code creates a hanging indent as ...

cssmarkdownhugo

Creating a multi-column dropdown menu: options for two, three, or multiple columns

Is there a way to implement multiple columns in a dropdown menu using the grid system in Bootstrap 4? Here is the code I have tried so far, but it's not working as expected (please note that the snippet is mobile-responsive) <!DOCTYPE html> ...

htmlcssbootstrap-4

Adding CSS styles to an HTML generic control such as <UL> and <LI> in an ASP.NET application

I am struggling to apply CSS to an HTML generic control like <UL> and <LI> with the attribute runat="server" in ASP.NET. Specifically, I need to target the <li> element located within a master page from a content page. Once I locate thi ...

c#.netasp.nethtmlcss

Tips for expanding the maximum width of a container using bootstrap4

Having trouble increasing the maximum width of my container. How can I adjust the width in the source code? I've attempted changing the width size in the bootstrap-grid.css file. The Element Inspector lets me change the max-width. Any tips on modify ...

csssassbootstrap-4width

Expand the <canvas> element to completely fill the flex item without any scrollbars

I am currently utilizing Bootstrap 5 and experimenting with setting up a nested flex layout that occupies the entire window. One of the flex items should be filled by a "stretchy" canvas element, ensuring there are no scrollbars present. However, when I a ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Can you see the visible area tag?

Is there a way to make an HTML element visible at all times, not just on focus? It seems like it should be as easy as this: HTML: <img src="image.png" width="100" height="100" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circl ...

htmlcss

Unable to transition slides in AngularJS on Safari iOS 9 due to malfunctions

Having some CSS classes that smoothly slide my ng-view left and right during route change, everything was working well on most browsers and phones until now. Under ios 9, the animation is not functioning properly. Instead of sliding left to right, the view ...

ioscssangularjsmobile-safariios9

Carousel-Owl, glide through two items simultaneously

I am currently in the process of developing a slider using the beta version of Owl-Carousel 2, but I am encountering several issues. My goal is to configure the owlCarousel to function as follows: It should scroll through 2 items at a time while displayin ...

javascriptjquerycssowl-carousel

What is the best way to set the exact pixel width for a sidebarPanel?

Is there a way to define the precise width of a sidebarPanel in pixels instead of using the width argument? I have found that the width option is not precise enough for my needs. library(shiny) ui <- fluidPage( sidebarLayout( sidebarPanel(widt ...

cssrshiny

Experience the magic of CSS Sprite once it's been successfully uploaded!

Visit the website for testing here Located at the bottom of the page are two images with hover effects - one labeled "Contact us" and the other "Jobs Available!" During local testing, these images are visible. However, once uploaded to a server, they dis ...

htmlcssftpcss-sprites