Utilizing Bootstrap classes exclusively to position icons and divs in alignment

Here is the code snippet I'm working with

<div class="row">
        <h3><b>We've got you covered</b></h3>
        <h6>Find things to do in cities around the world</h6>
        <div class="col-md-4">
        <div class="div-icon col">
        <i class="fas fa-info h1"></i>
        </div>
        <div class="div-content col">
        <b>Explore top attractions</b>
        <p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
        </div>
        </div>
        <div class="col-md-4">
        </div>
        <div class="col-md-4">
        </div>
        </div>

I'd like to align the icon and text together as shown in this image https://i.sstatic.net/kBUFo.png

This is how the icon and text are structured in my code

<div class="col-md-4">
        <div class="div-icon col">
        <i class="fas fa-info h1"></i>
        </div>
        <div class="div-content col">
        <b>Explore top attractions</b>
        <p><small>Experience the best of your destination with attractions, tours, activities, and more</small></p>
        </div>
        </div>

I have tried using only bootstrap classes like col and col, but they don't divide the col-md-4 into two. Is there a way I can achieve side-by-side display of the icon and content using Bootstrap classes?

htmlcssbootstrap-4

Answer №1

To properly structure your layout, remember to enclose your inner columns within a div class="row" and assign specific sizes using the cols attribute.

<div class="col-md-6">
    <div class="row">
        <div class="div-icon col-sm-2">
            <i class="fas fa-info h2"></i>
        </div>
        <div class="div-content col-sm-10">
            <b>Discover new adventures</b>
            <p><small>Embark on unforgettable experiences with our selection of tours, activities, and more</small></p>
        </div>
    </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

Error in Background Image Validation for WCAG 2.0 AA Compliance

Our website does not meet wcag 2.0 AA standards when background images are turned off, likely due to the use of a dark background color. We still want to maintain our current dark background, but need a solution that switches the background to white if im ...

htmlcss

The Firefox browser is not fully displaying the button background

Having an issue with a button that doesn't completely fill up on Firefox only. Here's the problem in action: This is how it should actually look: Not quite sure what to do. Here's the CSS styling being used: .button-panel .button { -web ...

htmlcssfirefox

I'm experiencing an issue with my website not being able to read the CSS and JavaScript files. Instead, it's displaying the error message

I am new to PHP and I am using Wordpress to build websites. Currently, I am trying to develop my own themes for Wordpress. However, I am facing an issue with loading the CSS and JavaScript files. Can someone assist me in resolving this problem? header.php ...

phphtmlwordpress

Automate CSS slideshow playback using JavaScript

Using only CSS, I created a basic slideshow where the margin of the element changes upon radio button click to display the desired slide. You can view the functionality in the code snippet below. Additionally, I implemented auto play for this slideshow usi ...

javascriptjqueryhtmlcssfunction

What is the best way to align background shapes within a specific section on a webpage using CSS?

I've been attempting to strategically place multiple shapes in the background using CSS, but I'm facing challenges. While I was successful with my hero section at the top of the page, positioning elements in a section halfway down has proven prob ...

htmlcss

Are there any strategies to bypass the color limitations in Bootstrap 5?

Recently, I began studying bootstrap through a crash course video tutorial. The developer demonstrated using various predefined color classes like danger, warning, and primary. Curious, I wondered if it would be possible to substitute dark with tomato re ...

htmlcsstwitter-bootstrapbootstrap-4colors

Tips on inserting text into form input fields

I need some guidance on how to enhance my form input functionality. The form currently consists of an input box and a submit button. When the user clicks submit, the form content is submitted and processed using javascript. What I am aiming for is to autom ...

javascripthtml

How about combining CSS and jQuery for dynamic image rollovers?

I would appreciate some guidance on this issue. I have an image that, when certain parts of it are hovered over, a word or another picture should pop out. While I feel confident in my ability to achieve the initial effect, I am uncertain about how to make ...

jquerycssimagestyles

Exploring anchor navigation with the help of the <a> tag within a React component

I am currently working on implementing anchor navigation within one of the page components in my React app. My goal is to achieve a similar functionality as demonstrated here in draft.js, where subheaders are used as anchors with a link icon next to them, ...

htmlreactjsanchor

Creating side panels on the left and right using CSS and HTML

I am looking to design a website where users can open sidepanes from both the left and right sides. I am not proficient in JavaScript and would prefer a solution using only CSS and HTML. While browsing, I came across a website that achieves what I want thr ...

csshtml

javascript popup appears twice in IE when using PHP

After testing this script on multiple browsers, an issue arises when using IE. In all other browsers, the form submission alert only appears once. However, in Internet Explorer, the alert pops up twice. What could be causing this discrepancy? <!DOCTYP ...

javascriptphphtml

Despite having the correct image URLs, the images are failing to display in the custom section of Shopify

Currently, I'm in the process of developing a unique Shopify section that showcases text alongside images. To enable users to upload images via the theme customizer, I have implemented the image_picker settings within the schema. The issue I am facing ...

htmlcssshopifyliquid

Modify the table's content by double-clicking

I have a table structured as follows : <table style="width:100%"> <tr> <th style="max-width:150px; min-width:150px; width:150px;"> </th> <th style="max-width:150px; min-width:150px; width:150px;">Monday</th& ...

javascriptphphtmljquery

I relocated the navigation HTML code to a new file and as a result, the JavaScript functionality is

After successfully implementing the hamburger icon animation in my navbar using JavaScript, I decided to move the nav code to a separate file for better organization. However, the decision resulted in an error where clicking on the burger icon returned a m ...

javascripthtmljquerynullnav

Tips for creating the Next.js Image component to simulate the behavior of a standard <img> tag

I have been grappling with this issue for hours and I'm at a loss for what to do next. Here is how my Image component is wrapped: <div className={styles.featureImgContainer}> <Image src={ post.feature_image } alt={post.ti ...

javascripthtmlcssnext.js

Mobile browser not resizing window width in fluid layout on WordPress site

Currently, I am working on developing a basic web layout that can adapt to mobile view. I have made some progress which you can check out here. The layout successfully adjusts when the window is resized in Firefox or Chrome. However, when I tried to acce ...

jqueryhtmlcsswindows-phone-8fluid-layout

How come Angular8's routerLinkActive is applying the active class to both the Home link and other links in the navigation bar simultaneously?

Currently, I am facing an issue with routing in my project where the home tab remains active even when I click on other tabs. I have tried adding routerLinkActiveOption as a solution, but it doesn't seem to be working for me. <ul class="nav nav-ta ...

htmlangulartypescriptangular-ui-bootstrap

What is the best way to use PHP in order to retrieve the element containing the visit ID from the specific row within an HTML table?

I am working on a project that involves populating an HTML table with data from a database. The table includes an approval button for administrators to approve visits and change their status to APPROVED. I am trying to figure out how to select the element ...

phphtmldom

Create an image of a static map from Google

I have incorporated the Google Static Map API into my Angularjs Application to display images of Google maps. Browse here for a glimpse Everything operates smoothly when there are fewer map coordinates. However, when I increase the number of map coordina ...

cssangularjsgoogle-mapsgoogle-maps-markersgoogle-maps-static-api

Build interactive web pages using Python scripts

By utilizing the Python scripts provided below, you can generate an HTML file with pre-set global variables (a, b, c, d). However, there might be instances when certain variables are not set globally, resulting in errors like "global 'a' is not d ...

pythonhtmlpython-2.7