Make sure the 'card-title' is positioned directly before a div element

How can I align the 'title' to start right above 'first yeah', with the image positioned accordingly? https://i.sstatic.net/fyI2o.png

I've attempted various methods (including using classes) but have been unsuccessful so far

Here is the code for the card:

<div class="card border-dark">
   <div class="card-body" style="background-color: #706747;">
      <h1 class="card-title">
         <p class="text-body">
            <img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block">
            {{cosos}} title
         </p>
      </h1>
      <br>
      <div class="d-flex flex-nowrap bd-highlight justify-content-center">
         <div class="order-1 p-2 bd-highlight">First flex item</div>
         <div class="order-2 p-2 bd-highlight">Second</div>
         <div class="order-3 p-2 bd-highlight">Third</div>
         <div class="order-4 p-2 bd-highlight">Final yup</div>
      </div>
   </div>
</div>

I am utilizing Bootstrap 5 for all my styling, without any custom classes or styles

htmlcssbootstrap-4bootstrap-5hbs

Answer №1

Follow these steps to align your logo.gif and title with the first nav bar item:

Step 1: Remove the class justify-content-center from the card-title and add p-2 after it.

Step 2: Add place-self: center; to the card-body.

Step 3: Set background-color: #706747; to the card class (remove it from card-body).

The updated HTML code will look like this:

<div class="card border-dark" style="background-color: #706747;">
  <div class="card-body" style="place-self: center;">
    <h1 class="card-title p-2">
      <p class="text-body">
        <img src="/assets/logo.gif" alt="" width="60" height="48" class="d-inline-block"> {{cosos}} title
      </p>
    </h1>
    <div class="d-flex flex-nowrap bd-highlight ">
      <div class="order-1 p-2 bd-highlight">First flex item</div>
      <div class="order-2 p-2 bd-highlight">Second</div>
      <div class="order-3 p-2 bd-highlight">Third</div>
      <div class="order-4 p-2 bd-highlight">Final yup</div>
    </div>
  </div>
</div>

Answer №2

Utilize the grid layout feature of bootstrap to properly align all elements.

<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3835352e292e283b2a1a6f746a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <div class="card border-dark">
   <div class="card-body" style="background-color: #706747;">
      <h1 class="card-title">
         <p class="text-body">
          <div class="row">
          <div class="col-3">
          </div>
          <div class="col-2">
           <img src="/assets/logo.gif" alt="" width="60" height="48" >
          </div>
          <div class="col-7">
           <span id="title1"> fdasdstitle</span>
          </div>
      </div>
         </p>
      </h1>
      <br>
      <div class="d-flex flex-nowrap bd-highlight justify-content-center">
         <div class="order-1 p-2 bd-highlight">First flex item</div>
         <div class="order-2 p-2 bd-highlight">Second</div>
         <div class="order-3 p-2 bd-highlight">Third</div>
         <div class="order-4 p-2 bd-highlight">Final yup</div>
      </div>
   </div>
</div>
  </body>
</html>

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 best way to utilize jQuery for deleting the final <li> within a <ul> element?

One of my web pages contains an unorganized list similar to this: <ul id="myList"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> </ul> How can I target the last ...

jqueryhtml

Access an attribute using slashes in Jquery

I've been struggling to use jQuery to select an object based on a unique filename attribute. However, I'm facing issues with escaping slashes when the selector is created using a variable. Despite spending hours trying different combinations, I s ...

javascriptjqueryhtmljquery-selectorsescaping

single-use date availability checker

I'm currently facing an issue with my code. It seems to be functioning correctly, but only for the first iteration. Let me explain further. If I select a date and time that is already in the database, it correctly displays "date unavailable". Likewis ...

c#htmlasp.netms-access

"Efficiently fetch data with an Express GET request without the

My goal is to send the client the HTML page (create.html) in response to a GET request triggered by a button click using fetch. I am intentionally avoiding the use of a form due to formatting and potential scalability issues. The code acknowledges that the ...

javascripthtmlexpressgetfetch

Leveraging a JQuery plugin to generate dynamic HTML content

Recently, I came across a fantastic JQuery plugin that Stack Overflow graciously provided for everyone to use :) Auto-size dynamic text to fill fixed size container However, I encountered a little challenge while trying to implement this on an HTML eleme ...

jquery.nethtmlasp.net-mvc-2

Display a hidden div upon loading the page if a certain condition is met

As a beginner in this field, I am struggling to assist a friend with a project. He needs a simple quote form that can generate HTML quotes for his client on a private WordPress page. The form should display a specific div based on the radio button selecti ...

javascriptphpjqueryhtmlcss

Enhance your Underscores Wordpress Theme by incorporating a secondary sidebar option

Started a new Wordpress site using the Underscores theme (_s) Successfully added one sidebar, but now looking to add a second one with different widgets on the same page. After adding the new sidebar to the functions.php file and seeing it in the Wordpre ...

phphtmlwordpressthemessidebar

What is the process for implementing a banner across the entire website?

I understand that this question resembles one found at this link, but I did not find a clear solution there. Currently, I am utilizing <?php include "banner.html"; ?>. However, in order for this method to work, I must change the extension of ALL page ...

phphtml

td having no line breaks causing text to extend beyond the cell

I have a challenge with using the nowrap property on td elements to ensure proper formatting of my tables. In the first table, everything wraps nicely, but in the second table, the content in the first "td" exceeds its designated space due to length. How c ...

htmlcsshtml-tableword-wrap

Coldfusion: The Troubles of an Empty Link href="#" Error

For my CFWheels Coldfusion project, I have been utilizing Adobe Coldfusion Builder 3. In Coldfusion, when you want to output a variable, you typically do something like this: #variable_name# However, I am interested in incorporating an empty link into m ...

javascripthtmlcoldfusionescaping

Ensure that each row contains no more than 5 items, and use flexbox to automatically resize

I currently have the following setup: .container { background: gray; width: 600px; display: flex; flex-flow: row wrap; position: relative; } .item { background: blue; width: auto; height: auto; margin: 4px; flex: 1; flex-basis: 20% ...

htmlcssflexbox

Setting up Jplayer as an audio player: A step-by-step guide

I am looking to incorporate a Jplayer audio player into my project, but I am struggling to find any documentation or resources that provide instructions on what components to include and how to set it up. If anyone has experience with using the Jplayer au ...

javascriptjqueryhtmlhtml5-audiojplayer

Guide to match the size of <td> with an <img>

I am currently attempting to align several images in my HTML using the <table> element. My goal is to eliminate any white space between the images. You can view my progress so far in this JSFiddle example: JSFiddle example. However, I am still encoun ...

htmlcsshtml-table

Validation of Coldfusion Forms: File Input

What is the best way to determine in ColdFusion if a user has selected a file for upload to the server? Using IsDefined function doesn't provide that information. ...

htmlcoldfusionadobevalidation

Watir /Cucumber Element not found: dd-field div.dd-arrow-box (CSS Selector)

Chief complaint: The element cannot be located using CSS Selector Custom Css path: html.ng-scope body.ng-scope div.snap-content div.content-container div.ng-scope div.content-box div div.cb-landing-module div.deposit-acct-box div.dropdown div.dd-field ...

cssselectorwatir

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

Hey there, I'm currently working on implementing error validation handling for a custom form that I've created. I'm looking to display the error messages in a designated div rather than using the standard browser alert box. Since I'm fa ...

javascriptphphtmljqueryajax

The absence of the `breakInside` rule in GrooCSS

Currently, I am utilizing GrooCSS 1.0-GA for my CSS coding needs. Regrettably, it appears that GrooCSS does not provide support for breakInside as illustrated in the code snippet below: GrooCSS.process(new Config(prettyPrint: true)) { body { breakIns ...

cssgroovydsl

Remove the right margin on the bootstrap container

I am currently working on creating dashboards using the Python library called Dash, and I have encountered an issue with Bootstrap components. Specifically, I am unable to remove the right margin from the container. I have tried using class_name='m-0& ...

pythoncsstwitter-bootstrapplotly-dashbootstrap-5

What is the purpose of the AspNet.ScriptManager.bootstrap function?

While attempting to upgrade from bootstrap 4.6.0 to 5.1.3, I encountered an error stating that 'bootstrap 5.1.3' is not compatible with 'AspNet.ScriptManager.bootstrap 4.6.0 constraint: bootstrap (>= 4.5.9 && <= 4.6.1)'. ...

asp.netbootstrap-5

Making the Select Tag function as an on-click event in JQuery

So I currently have a tab set up that functions as on click links when viewed on desktop. However, for tablet and mobile devices, I need it to be transformed into a select drop down list while maintaining the same functionality. Below is the code used for ...

javascriptjqueryhtmlevents