Tips for arranging text on the right side of an image and placing other text below it using Bootstrap

https://i.sstatic.net/K4LWc.png

I'm currently working on implementing this layout using Bootstrap. So far, I have successfully positioned the Marketplace next to the logo by applying the d-inline class.

However, I am facing a couple of issues. The alignment between the market place and the logo is not perfect, and the text below them appears disjointed with unnecessary breaks. How can I achieve the desired layout as shown in the image?

.marketplace {
        background-color: #5960CB;
        width: 100%;
        height: 50%;
        list-style-type: none;
    }
 .containerMarket p {
        color: white;
        font-family: 'Poppins', sans-serif;
        margin-left: 5px;
        margin-top: 10px;
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="marketplace col-sm-12">
        <div class="container containerMarket col-sm-4">
            <img src="img/fullLogoWhite.png" width="150" class="d-inline"> <p class="d-inline">Marketplace</p>
            <p>High quality items created by our global community.</p>
            <p><span>65,478</span> Products | <span>65,478</span> Members | <span>65,478</span> Vendors</p>
        </div>

Appreciate any help!

htmlcssbootstrap-4responsive-designfrontend

Answer №2

.marketplace {
        background-color: #5960CB;
        width: 100%;
        height: 50%;
        list-style-type: none;
    }
 .containerMarket p {
        color: white;
        font-family: 'Poppins', sans-serif;
        margin-left: 5px;
        margin-top: 10px;
        margin-bottom: 10px;        
    }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="marketplace col-sm-12">
        <div class="container containerMarket">
        <div class="d-flex align-items-center">
            <img src="img/fullLogoWhite.png" width="150" class="d-inline"> 
            <p class="d-inline">Marketplace</p>
        </div>

<p class="small">High quality items created by our global community.</p>
            <p class="small"><span>65,478</span> Products | <span>65,478</span> Members | <span>65,478</span> Vendors</p>
        </div>

https://i.sstatic.net/QJd0v.png

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

The functionality of .bind() is malfunctioning on both Microsoft Edge and Google Chrome browsers

Everything seems to be running smoothly on Mozilla (version 103.0), but unfortunately, it's not performing as expected on Chrome or Microsoft Edge. $('#loading').bind('ajaxStart', function () { $(this).show(); }).bind('ajaxS ...

javascripthtmljquery

Necessary Selection from Dropdown

I've created a contact form with both optional and required fields. One of the mandatory fields is a drop-down menu, which looks like this: <div> <select name="favFruit[]" size="1" required> <option value="apple">Apple&l ...

jqueryhtmljquery-validateselectlist

What is the best way to use a HTML link to toggle the visibility of a <p> element using

I've been trying to figure out how to make a link show and hide a paragraph below it for some time now. I want to do this using just CSS. The paragraph should be hidden by default, then display when the link is clicked, and hide again with another cl ...

htmlcss

The img-fluid class is not properly adjusting the height of the image

I'm currently working with Bootstrap 4 and facing a challenge with creating a grid of 4 images - 2 on top and 2 at the bottom. I've applied the img-fluid class, but the image resizing is based solely on width, leading to the height being too larg ...

htmlcssbootstrap-4fluid-layout

Stop the entire page from scrolling in Next JS, while still enabling individual components to scroll

My ultimate goal is to have a fixed, sticky menu bar at the top of my app, followed by a div/component that houses the remaining content and does not scroll itself, while still allowing sub-components the ability to scroll when necessary. I plan to build t ...

htmlcssnext.jstailwind-css

"Executing ng-click directive on a second click changes the route in AngularJS

Why does my ng-click only redirect to a new location on the second click? It should redirect to $location.path('/login.signin');, but it only works if I click the button again. It's strange. Where could this issue be originating from? Belo ...

javascripthtmlangularjsfirebaseangularjs-ng-click

Window backdrop being filled

I am attempting to set a background image that fills the entire window regardless of its size. I have implemented html, css and script as shown below: // Function adaptImage() // Parameters: targetimg function adaptImage(targetimg) { var wheight = $ ...

javascripthtmlcss

Can the CSS color of struts2-jquery-grid-tags be modified?

Is there a way to customize the CSS style of my Struts2 jQuery grid tags? I'm having trouble adjusting the font size of the header layer. Can someone please advise on how to change the style, color, and other formatting of the grid similar to regular ...

javascriptjquerycsshtmlstruts2

Ways to position a drop-down menu in the center

I need help creating a centered NavBar with dropdown options. I'm currently struggling with deciding whether to align the dropdowns left or right. Can anyone provide guidance on how to center them instead? I've attempted using the float property ...

htmlcssbootstrap-4

issues with auto-fill functionality in Firefox and Internet Explorer

I am looking to have my username and password automatically filled in when a user is already logged into the website. I have enabled autofill using the code below. Ideally, when a user visits the site again, both the username and password fields should be ...

javahtmlinternet-explorerfirefoxautofill

How can I enhance the appearance of the WordPress pagination numbers with a stylish border

Is there a way to apply a border around the WordPress pagination that starts from the first number and ends at the final number in the pagination sequence? The current structure of the WordPress pagination includes: <a class="prev page-numbers">< ...

jquerycsswordpresspagination

The transitioning period caused the gooey effect to become distorted

I'm currently working on creating a radio button with a gooey effect. The transition looks great, but once it's complete, the colors don't blend well and the edges glow in an odd way. I've been searching for the root of the issue, but ...

jquerycsssvg-filters

Tips for applying CSS conditionally to content at varying nesting levels

Currently, I am working with sass and finding it challenging to modify the structure of the page easily. The layout I have in place is due to my header having varying sizes depending on the specific page users are browsing: <div class="container"> ...

htmlcsssass

Troubleshooting issues with embedding an Excel file using iFrame

Currently, I'm utilizing an iframe to embed an Excel file into an HTML page using the Microsoft OneDrive embed function. The issue I'm facing is that while it displays the excel file, it doesn't embed it properly; instead, it takes over the ...

htmlexceliframeembedonedrive

What is the reason behind the modification in flex item size when align-items property is applied?

When creating the responsive design, I utilized flexbox. Surprisingly, without changing the size of each flex-item, applying align-items:center caused the size of the first flex item (PICTURE 2) to change when displayed in a vertical view. On the other han ...

cssflexboxresponsive-design

Get the value of a CSS property in Python by parsing the rendered HTML

Currently, I am using Selenium and PhantomJS in conjunction with Python for the purpose of crawling rendered web pages. While it is a straightforward process to identify the presence of specific words within the HTML content (e.g. if "example" in html...), ...

pythonhtmlcssseleniumphantomjs

Selecting a folder path with Angular 6: A step-by-step guide

Currently, I am aiming to extract the folder path string without uploading any files. The goal is simply to capture the path for future use. Below is an example of how you can prompt users to select a file: <input id="folder-input" #folderRef type="fil ...

htmlangular6

Issues with Bootstrap Collapse functionality on an HTML document

Trying my hand at crafting a FAQ dropdown menu using bootstrap collapse. I've set up the collapse like this: <div class="container textcontainer accordion" id="accordionExample"> <div class="card"> <div class="card ...

jqueryhtmlbootstrap-4

What is the best way to display a Bootstrap alert above all other elements on the page?

I need help with adjusting the placement of my bootstrap alert. Currently, when the input box value is not valid and the button is clicked, the alert shows up below the input box. I would like it to appear in the middle of the page, on top of the text box. ...

javascriptcsstwitter-bootstrapbootstrap-5alert

CSS appears distorted with unusual symbols

When I open my index.html and global.css files in Coda, Textmate, or other text editors, everything appears fine. However, when I try to view them in Firefox, the index.html file loads the CSS from the correct path but it doesn't seem to take effect. ...

htmlcsscharacter-encoding