Design a Logo-aligned Header using Bootstrap 4 for a professional and sleek look

I'm attempting to design a header using bootstrap 4 that resembles the image shown https://i.sstatic.net/MFVZU.png. However, I'm encountering several issues with this method. The main problem is that the logo is not properly centered in the middle of the header. I've tried various approaches to resolve this, such as using align=middle, adding margin-bottom (which ends up creating more space below than above), and experimenting with the grid system by using col-1 and col-9. Unfortunately, the last method results in too much space between the logo and the heading.

The image provided showcases the version where the image is contained within the h1 element in HTML. The code snippet to create the logo is as follows: 

<h1 class="display-4 bg-primary text-light">
<img src="https://via.placeholder.com/64x64" width=64 height=64 />Some text 
<small class="text-white-50">
The new way of doing text-research</small></h1>
Could there be an error on my end? It seems like examples of logos integrated with Bootstrap are quite rare. Perhaps there's a specific reason for this...

Additional details

  • The small text should not be centered.
  • My goal is to achieve this using only Bootstrap utilities.
htmlcsstwitter-bootstrapheaderbootstrap-4

Answer №1

Utilize flexbox for organizing all elements on the page without nesting the image and text within the h1 tag.

div {
  display: flex;
  align-items: center/* vertical alignment */
}

small {
  font-size: 1rem;
}
<div>
  <img src="https://via.placeholder.com/64x64" width=64 height=64 />
  <h1 class="display-4 bg-primary text-light">Some text<small class="text-white-50">The new way of doing text-research</small></h1>

</div>

Answer №2

If you already have a basic understanding of Bootstrap, the following assumption can be made:

It is presumed that your code structure resembles something like this:

<div class="container-fluid">
     <div class="row">
          <div class="col-lg-12 header">
            <span>
               <h1 class="display-4 bg-primary text-light">
                 <img src="https://via.placeholder.com/64x64" width=64 height=64/>
                 some text
                <small>The new way of doing text-research</small>
              </h1>
            </span>
          </div>
     </div>
</div>

NOTE: The custom CSS has been removed.

It should be noted that organizing HTML in this manner is not ideal. However, if you prefer not to use any custom CSS, this solution might address your issue.

I trust this meets your requirements.

For an updated version of the code, please visit the following CodePen link: https://codepen.io/Jsilvestri/pen/vzzJRy

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

How can I use JavaScript to disable a table row and then save the selected option in a MySQL database?

I have a PHP snippet that dynamically displays table rows. Each row contains a radio button with "Yes" and "No" options. I have implemented a JS function where, upon choosing an option, a pop-up box is displayed. If the user selects the "Yes" option in t ...

javascriptphphtmlmysqlradio-button

Creating a "select all" feature in an HTML multiple select box with jQuery - a step-by-step guide

I'm currently working on an HTML form that includes a multiple select box. I am looking to create a "select all" option within the multiple select box so that when a user clicks on that option, all other options in the select box are automatically sel ...

javascriptjqueryhtmlhtml-select

Is the "footer" div automatically nested within the "main" div if they are not nested in the code?

Within my code structure, I currently have the following: <html> <head> ... </head> <body> <div id="body"> <div id="main"> ... </div> <div id="foot ...

htmlcss

Error encountered when attempting to access a dropdown menu on a website due to a NoSuchElementException

In my current project using Python with selenium, I am encountering an issue while trying to interact with a list box on a webpage. The error message that I receive is as follows: selenium.common.exceptions.NoSuchElementException: Message: Unable to loca ...

pythonhtmlselenium

What is the method for linking events across multiple objects?

When a user clicks on the confirmation button in a Twitter Bootstrap modal window, I trigger a deletion action on the page. The modal contains two buttons - one for canceling the action and another for confirming it. Once the user confirms the delete act ...

javascriptjquerytwitter-bootstrapjquery-events

Listening to a song on a webpage while filling out the online form

Seeking advice on integrating audio file selection in form: <form ....> <input type="file" name="file-main" id="file-main" class="inputfile inputfile-3" multiple/> <audio preload="none" src=""> // excluding submission buttons for brevi ...

javascriptjqueryajaxhtmlforms

Unable to show additional columns beyond 6 while using Bootstrap's row-cols feature

Currently working on developing an auction website where I plan to showcase the listings as cards in columns. I have successfully managed to display a varying number of cards on different screen sizes, but I am facing an issue with showing more than 6 card ...

htmlgridbootstrap-5

Design a personalized select element with a unique background hue

https://i.stack.imgur.com/Dzifp.jpg Trying to create a navigation with col-md-9 and select tags but facing an issue where adding a background-color to the div causes the green background of the arrow to disappear. https://i.stack.imgur.com/A4P9Q.png Plea ...

htmlcss

Mastering the art of horizontal alignment for button and ul elements

I aim to create a unique layout that appears as follows: [the button][world1][world2] The code provided is in HTML format: <div id='container'> <button id='my-button'>the button</button> <ul id='my-ul&a ...

css

Opt for buttons for color selection instead of a checkbox toggle

I attempted different approaches to replace the existing checkbox with a button but encountered difficulty. Using the onClick method also proved unsuccessful. VIEW DEMO HERE: https://jsfiddle.net/yxez4a2u/ HTML: <div class="form-check form-switch ...

javascripttwitter-bootstrapbootstrap-5

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Trying to achieve the look of the attached image with a few divs. I know I can use a background image like this: background:url(image.png) no-repeat left top; But I'm curious if there's another way to achieve this without using a background ima ...

javascripthtmlcsstwitter-bootstrap

What is the proper way to display the initial content of the menu?

I am currently working on a website design for an upcoming festival. The festival spans over three days, so I have created buttons to navigate and load the content for each day separately. Is there a way for me to make the content for the first day di ...

javascripthtmlcss

Tips for creating a condensed header

As a newcomer to HTML, I am facing challenges in creating a simple header similar to the one displayed on this website or the example in the image below. Below is the snippet of HTML that I have attempted: <header class="header"> <div ...

javascripthtmlcss

Tips for customizing the transparency of a Bootstrap dropdown menu

I'm currently working with .navbar-default { z-index:99; opacity:0.8; } However, I am looking to adjust the opacity of dropdown menu items to 0.9. I have attempted several solutions without success. Here are a few examples: .dropdown-menu>li> ...

csstwitter-bootstrapmenutransparencyopacity

To incorporate node_modules CSS into a Vue.js application that is utilizing SCSS, follow these steps

After deploying my application to AWS, I noticed that the application was rendering correctly except for the Syncfusion controls, which were not rendering correctly. Surprisingly, there were no errors shown in the Google Chrome console. On my local machine ...

cssvue.jswebpacksassej2-syncfusion

extract information from the HTML id attribute and assign it to a PHP variable using the GET method

After reviewing numerous examples, I am still unable to retrieve the value from the ID attribute in my input element. This identifier is crucial for deleting records from the database, but my attempts with Get method have been unsuccessful. <?php ...

phphtmlattributes

Limiting zero is ineffective when it comes to pop-up issues

Hey there, I'm looking to prevent users from inputting zero and dot in a specific field, which is currently working fine. However, when the field is within a pop-up, the code below doesn't seem to work. <script> $('#name').keyp ...

javascriptjqueryhtmlcss

Identify the current slide or div within a jQuery slideshow

I am currently facing an issue with my slide show that is composed of divs, each containing a picture and some html controls. The problem arises when clicking on a control in a slide other than the first one - it only updates the first slide. The only thin ...

c#jqueryasp.nethtmlcss

Personalized HTML characteristics

Within the realm of AngularJS (and possibly jQuery UI), I've come across tags such as ui:some_random_name and ng:some_random_name. It seems that according to the HTML specification, non-standard attributes are not allowed. So how do these libraries m ...

htmlangularjsattributes

What is the best way to pass createdDt and updatedDat values in an Angular form without displaying them on the template?

I am working on a message creation form in Angular where I need to include createdDt and updatedDt as hidden values. These values should not be visible in the template. I want to automatically set the current date and time for both createdDt and updatedD ...

htmlangulartypescriptangular-forms