How can I increase the space between an icon and text in my design?

I am currently facing challenges with incorporating Bootstrap alongside CSS and am in the process of familiarizing myself with Bootstrap documentation using Flex. I am struggling to create more space as the text continues to closely follow the icon when I apply margin. I am seeking a solution to achieve the desired result. I am working with Bootstrap 4.

My Result:

The result I am aiming for:

Below is the code utilizing Bootstrap and CSS from the First Image (My Result)

div.order-1,div.order-2,div.order-3 {
  color: #3379EA;
  margin: auto;
  margin-top:30px;
}

div.order-1 {
  border-right: 3px solid #3379EA;

}

div.order-3 {
  border-left: 3px solid #3379EA;
}

i.fas {
  color: #3379EA;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2c2ddc2c2d7c09cd8c1f2839c83849c83">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div class="d-flex flex-nowrap justify-content-end" style="margin-top:30px;margin:auto;"><!-- I put margin again to make them center-->
  <div class="order-1 p-2 justify-content-end text-center font-weight-bold">Smart<br>
    <i class="fas fa-brain fa-2x"></i></div>
  <div class="order-2 p-2 justify-content-end text-center font-weight-bold" >Wise<br>
    <i class="fas fa-lightbulb fa-2x"></i></div>
  <div class="order-3 p-2 justify-content-end text-center font-weight-bold">Accountable<br>
    <i class="fas fa-users fa-2x"></i></div>
</div>
                 </div>
               </div>
            </div>

Thank you for your assistance.

htmlcssbootstrap-4

Answer №1

One important thing to keep in mind is utilizing the flex-fill class and enclosing your text within an element (like a span) to allow for custom border styling.

Remember: It is recommended to avoid using <br/> for markup purposes. For more information, check out Is it sometimes bad to use <BR />?

.menu {
  margin: 30px;
}

.menu .item {
    color: #3379EA;
    margin: auto;
    margin-top: 30px;
}

.menu .item span {
  color: #515151;
  display: block;
  height: 50px;
  line-height: 50px;
  border-right: 3px solid #3379EA;
}

.menu .item:last-child span {
  border-right: 0;
}

.menu i.fas {
    margin-top: 16px;
    color: #3379EA;
    display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="menu d-flex flex-nowrap">
  <div class="item order-1 justify-content-end text-center font-weight-bold flex-fill">
    <span>Smart</span>
    <i class="fas fa-brain fa-2x"></i></div>
  <div class="item order-2 justify-content-end text-center font-weight-bold flex-fill">
    <span>Wise</span>
    <i class="fas fa-lightbulb fa-2x"></i></div>
  <div class="item order-3 justify-content-end text-center font-weight-bold flex-fill">
    <span>Accountable</span>
    <i class="fas fa-users fa-2x"></i></div>
</div>

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

Switch back and forth between words using a simulated typewriter effect in JavaScript

My current project involves writing code that will display text in a typewriter style. The code should be able to print a string, erase the last word, and type out words from an array in sequence. Each word in the array should be displayed one at a time be ...

javascripthtmlarrays

swapping out an external CSS file in React for a new CSS file

My React app is quite large and includes four main CSS files (darkLTR, lightLTR, darkRTL, lightRTL), which may not be the most efficient setup. The templates were provided by my boss, and I was instructed to use them instead of Material UI, which I initial ...

javascriptcssreactjs

Bootstrap - Struggling to achieve responsiveness on the page

I've recently designed a website with a mega menu feature. However, as I try to resize the page, the layout doesn't adjust well, and some elements appear to be overflowing beyond the screen. Unfortunately, I can't share the entire code. Cou ...

htmljquerycssbootstrap-4

The global CSS styles in Angular are not being applied to other components as expected

Currently utilizing Angular v10, I have a set of CSS styles that are meant to be used across the entire application. To achieve this, I added them to our global styles.css file. However, I'm encountering an issue where the CSS is not being applied to ...

javascripthtmlcssangulartypescript

Updating radio button based on selection change in jQuery

I'm struggling with jQuery and can't seem to figure out how to change the selected radio button based on a value in another select box. <div class="radio-inline" id="sourceDiv" role="group"> <input type="radio" id="sourceBtns1" na ...

javascriptjqueryhtml

Click on a div in AngularJS to be directed to a specific URL

I'm currently working on developing an Angular mobile app and I want to be able to navigate to a specific URL, like www.google.com, when a particular div is clicked. Unfortunately, I'm still new to the world of Angular and struggling to achieve t ...

javascripthtmlangularjs

Steps to eliminate validation following the clearing of input fields

This is the code I've written for live validation using AJAX in an input field. My issue is that I want the validation to be removed if all inputs are deleted. <script type="text/javascript"> $(document).ready(function(){ ...

htmljqueryajax

Currently, I am compiling a list of tasks that need to be completed, but I am encountering a dilemma that is proving difficult to resolve

Recently delved into the world of Javascript and encountered a roadblock that I can't seem to overcome. Here's the snippet of code causing me trouble: add = document.getElementById("add"); add.addEventListener("click", () => { console.log("Ple ...

javascripthtmlcssarrays

Customizing the color of the thumbs on a Material UI range slider

Hey there, currently working on creating a range slider with 2 values using the material UI slider component. My goal is to customize the two thumbs with different colors. https://i.sstatic.net/BUq12.png Any ideas on how I can achieve this? ...

cssreactjsmaterial-uisliderrangeslider

Eliminating data from selection options on a HTML menu list

Currently, I am facing an issue while attempting to incorporate a menu bar into my HTML page. After adding the icons, they are displaying with both underlines and dots at the back. I have tried using text-decoration=none; to remove the underline, but unf ...

htmlcssmenunavigation

How can I update the color of table rows after the ng-repeat has been implemented?

My current project involves Django, Python, and a bit of AngularJS. I have a dynamic history table that grows as data is added. I am looking to apply some simple CSS to this table - specifically, I want to give every even-numbered row a black background ...

javascriptpythoncssangularjsdjango

Echo a JS variable into PHP and then insert a PHP file into an HTML element - a step-by-step guide!

Greetings to the wonderful community at stackoverflow, I am currently working on a variable code that allows for easy insertion of code from another file, such as a div. I am curious if it is possible to include a PHP file using JavaScript and JS variable ...

javascriptphphtmlvariables

What is the process for retrieving the value of the 2nd td by clicking on the checkbox in the 1st td with JavaScript

When I click on "in", I am looking to retrieve the value of "out". This can be easily understood by referring to the image below: The timesheet displayed is generated using an array. All the data is stored in the array and needs to be presented in a table ...

javascriptphpjqueryhtml

Geolocation API for determining altitude

When using the geolocation API, I am experiencing no issues with latitude and longitude. However, I have encountered a problem with Altitude. For instance, when I retrieve the coordinates for my current location using my mobile phone with integrated GPS, i ...

html

How to make Firefox create a new line in a contenteditable field

I am working with a contenteditable div that is within a parent div with a floating width of 50%. My goal is to set the max width of the content editable to match the container, even if the text spans multiple lines. Here is the CSS I tried: .editable-con ...

htmlcssfirefoxcontenteditable

Content in Bootstrap not filling entire mobile screen

The content in this form does not stretch to full screen on mobile phones, but it appears properly on computers and tablets. Please advise on how to solve this issue. https://i.stack.imgur.com/S2XkS.jpg <link rel="stylesheet" href="https://maxcdn.bo ...

phphtmlcssbootstrap-4bootstrap-modal

Categorize Jekyll tags into two distinct groups

I am currently using Jekyll to construct a GitHub Pages website. The grid and column layout are powered by Bootstrap. When it comes to listing all the posts linked to a specific tag, I begin by sorting the tags and then listing all the posts associated wit ...

htmlbootstrap-4jekyll

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

htmlcsspure-css

Unable to assign image src to a dynamically generated div

My current task involves setting the background URL of a dynamically created div in JavaScript, intended for use with the jQuery Orbit slider. Below is my approach: var content1 = null; $("#featured").html("<div id='content' style='&apos ...

javascriptimagehtmlsrcorbit

Spinning Earth orbits around the Sun

My goal is to create a 3D Solar system, starting with the Sun and Earth using THREE.SphereGeometry() var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(50, 100, 100), new THREE.MeshBasicMaterial({side: THREE.DoubleSide, map:txt2})); sphere2.position.se ...

javascripthtmlmaththree.js