I am unable to line up every item next to one another

Regarding the topic at hand, I am facing an issue with aligning multiple objects that should be enclosed in i tags side by side. Despite attempting to use li tags and float:left and right in CSS, the position remains unchanged. Can anyone provide guidance on how to adjust the positioning?

 <section id="mypassion-section" class="bg-light text-muted py-5">
      <div class="container">
        <div class="row">
          <div class="col-md-4 text-center">
            <img src="img/logo.png" width="100px" height="100px"  alt="" class="img-fluid mb-3 rounded-circle">
            <h3>Student Growth</h3>
            <p>Client Name Here <br>Before Course</p>
            <i class="fa fa-play icon-left" aria-hidden="true"></i>
            <p>After Course</p>
            <i class="fa fa-play icon-right" aria-hidden="true"></i>
          </div>
cssbootstrap-4

Answer №1

To achieve alignment of items without disrupting the DOM structure, I utilized Bootstrap classes. For a deeper understanding of these classes, you can refer to this link.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9dfff2f2e9eee9effceddda9b3a8b3ae">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<section id="mypassion-section" class="bg-light text-muted py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center">
                <img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
                <h3>生徒さんの成長</h3>
                <p>OOOOO様 <br>受講前</p>
                <div class="d-flex align-items-center justify-content-center">
                <i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
                <p class="mb-0">受講後</p>
                <i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i>
                </div>
            </div>
        </div>
    </div>
</section>

Answer №2

Is there a specific reason why the icons weren't placed within the p tag?

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f6949999828582849786b6c2d8c3d8c5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<section id="mypassion-section" class="bg-light text-muted py-5">
    <div class="container">
        <div class="row">
            <div class="col-md-4 text-center">
                <img src="https://via.placeholder.com/100x100.png?text=Logo" width="100px" height="100px" alt="" class="img-fluid mb-3 rounded-circle">
                <h3>生徒さんの成長</h3>
                <p>OOOOO様 <br>受講前</p>
                <p><i class="fa fa-play fa-rotate-180 icon-left" style="margin-right: 1rem;" aria-hidden="false"></i>
                受講後
                <i class="fa fa-play icon-right" style="margin-left: 1rem;" aria-hidden="false"></i></p>
            </div>
        </div>
    </div>
</section>

It's great that you included some code in your question. To enhance it further, consider using the snippet tool to incorporate Bootstrap and Font Awesome CSS files and provide a live demonstration of your current progress.

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

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Currently, I am utilizing Python as the backend for my React frontend. The backend is passing in values such as 17 or 87, and I aim to use these values as a percentage on the scale that I am constructing. Currently, the scale starts in the center: https:/ ...

cssreactjsfrontend

Reverse the orientation of the SVG image, for instance, the graph

I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http: ...

csshtmlsvg

Customize Bootstrap: Change the background color

Let me show you my updated file structure: │ styles.scss ├───scss │ _bootstrap-overrides.scss │ _global.scss │ _mixins.scss │ _nav.scss │ _resume-item.scss │ _variables.scss The main file remain ...

twitter-bootstrapbootstrap-4

Is it possible for jQuery to execute in a sequential manner?

Below is the code I am working with: https://jsfiddle.net/c4zquo60/1/ CSS: #bg { background-repeat: no-repeat; position: absolute; top:0; bottom:0; left:0; right:0; width:100wh; height:100vh; z-index: -1; opacity: ...

javascriptjqueryhtmlcss

At what point do browsers automatically insert CSS styles as attributes without them being explicitly defined?

Greetings Code Gurus, I find myself grappling with an unexpected CSS anomaly while developing a website. Here is the puzzling code snippet: <div id="..." style="padding-bottom: 78px; padding-top: 78px;" >...</div> These styles are manifesti ...

htmlcssinternet-explorergoogle-chromefirefox

Creating a dynamic Bootstrap card body with an image using Vue.js and integrating it with Firestore cloud DB and a local image source

I'm in the process of developing a compact Vue js page named AddItem.vue which will store the following data. data (){ dish_name: null, dish_description: null, dish_type: null, dish_image: null } The plan is to have a boo ...

vue.jsbootstrap-4google-cloud-firestoreaxios

Tips for creating a submission alert using bootstrap and react.js?

As a newcomer to React.js, I am currently exploring how to implement certain functionality in a form. My goal is as follows: 1) I want to delete the records/inputs after the submit button is clicked. Currently, even after submitting the information and s ...

node.jsreactjstwitter-bootstrapbootstrap-4web-frontend

Verify whether the document includes a class that closely matches the provided string using Javascript

I need help identifying elements that include the letters 'ad'. For example: <iframe class="container" /> <!-- Not relevant --> <a class="adp" /> <!-- Relevant --> <a class="adleft" /> ...

javascripthtmlcss

What is causing compatibility issues between Firefox and the provided CSS code?

I am experiencing an issue with the page layout in FireFox. The widths are not displaying correctly and the upload button does not work. However, I have no problems when using IE or Chrome. I have reviewed the code but cannot find any errors. Here is the ...

htmlcssinternet-explorergoogle-chromefirefox

Issues with navigating sliders

I've encountered a problem with my slider arrows while following a YouTube tutorial. They are supposed to appear next to the picture and testimonial, but instead, they are showing up at the top. This issue wasn't present initially, but after enco ...

javascripthtmlcsssliderfrontend

Is there a way to make the text scroll up automatically when it overflows?

I have a straightforward div element that occupies the header's height but currently has a fixed height of 400px for testing purposes. Here is how it currently appears: https://i.sstatic.net/gg6kQ.png I am utilizing the type-it library to dynamical ...

javascriptjqueryhtmlcss

A different approach to achieving a newspaper-like text justification in HTML

When I have a paragraph with text-align:justify, the spacing between words can become uneven due to certain words. I used to rely on the property text-justify:newspaper; which helped break up the words for more evenly spaced text, but unfortunately, it is ...

htmlcss

Creating a CSS scrollbar that mimics touchscreen behavior by allowing all text to be movable

The touch apps I developed work great in kiosk mode on HD-sized screens in fullscreen using Chromium. Now, I want to showcase the site to individuals who want to check the content and functionality. I can recommend that they use Chromium's dev mode, ...

htmlcss

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

I've successfully implemented a packery image grid that is responsive and functional when the background image in the .item-content section is defined in the CSS file: http://codepen.io/anon/pen/eJdapq .item-content { width: 100%; height: 100%; ...

javascriptjqueryhtmlcsspackery

How to align a div in the center of a cell with Bootstrap

I am currently working with Bootstrap 3 and I have a specific requirement to center a div within a cell in the container row. Most resources I found only mention how to center a div within the entire container, which is not what I am looking for. My goal i ...

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3

Using a variety of different font styles within a single sentence

I'm looking to add a title with text in one of my divs, but I want the title to be in 3 different font sizes. Any suggestions on how to achieve this without starting a new paragraph for each size change? Here's an example of what I'm trying ...

htmlcssfont-family

Preventing the image from being displayed when it cannot fully show is achieved through blocking the background repeat

Is there a way in CSS to only display a background image if it can be fully shown without setting the width in pixels? I want to avoid showing partial background images. Is there a CSS property that can help with this? [] <div align="left" style="pad ...

htmlcss

Eliminate any unnecessary or hidden spacing on the left side of the options within an HTML select

Currently, I am in the process of creating a Registration Form and encountering a challenge with aligning the input[type="text"] placeholder and the "pseudo" placeholder for a <select> element. My goal is to have both placeholders left-aligned flush ...

jqueryhtmlcss

What could be causing my line-clamp to malfunction when using a fixed height in the Safari browser?

I have a problem with the design of my episode list on mobile devices. The list has a fixed height, and I am using the line-clamp-2 property for the episode titles that exceed two lines. While everything looks fine on my PC and even when using Dev Tools t ...

cssiossafaritailwind-css

Tips on utilizing bootstrap alongside html GET request for retrieving input values?

I created an HTML code using the bootstrap library. Essentially, I need someone to visit my website, input their information, and have their inputs stored for internal analysis. After the user enters their input, the URL will redirect to a 'search&apo ...

htmldjangopython-3.xdjango-viewsbootstrap-4