Arrange image, icon, and title in Bootstrap navigation bar

index.html

 <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">

            </ul>
            <span class="navbar-text" s>
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item" class="bellicon" style=" border-right: 1px solid #d0c4c4;" >
                        <span class="bellprite bellie"></span>
                    </li>

                    <li class="nav-item active" class="navv" >
                    </li>
                    <li class="nav-item" style="display:inline; margin-left: 20px;">

                           <li >

                               <span> <img class="profile-face"  src="./images/profile.jpg">
                                <span> John Doe </span>
                                <span class="downprite downie"></span>


                          </li>
                    </li>
                </ul>
            </span>
        </div>

https://i.sstatic.net/G2gs3.png https://i.sstatic.net/GQAl8.png

This is a customized bootstrap 4 navbar with right alignment. How do you structure the items properly within it?

htmlcssbootstrap-4

Answer №1

Perhaps something along these lines. 

.navbar .divider-vertical {
  height: auto;
  margin: 0 9px;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #f2f2f2;
}

.btn-transparent {
  background: transparent;
}

.avatar {
  width: 30px;
  margin-right: 5px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-expand-md align-self-center">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">
          <i class="fas fa-bell"></i>
        </a>
      </li>
      <li class="divider-vertical"></li>
      <li class="nav-item">
        <div class="dropdown">
          <button type="button" class="btn btn-transparent dropdown-toggle" data-toggle="dropdown">
            <img src="https://randomuser.me/api/portraits/women/65.jpg" class="avatar rounded-circle" alt="Cinque Terre">
            Wilma Roth
          </button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
          </div>
        </div>
      </li> 
    </ul>
  </div> 
</nav>

Answer №2

Here are three potential solutions:

  • Add padding-top and padding-bottom to the correct container
  • Apply vertical-align: middle to the right-aligned element
  • Set the line-height for both inner elements

Tip: Remember to use "!important" for any CSS rules that are overriding Bootstrap styles

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

Trouble with Div Alignment in Web Browsers: Firefox vs. Google Chrome

I have encountered an issue with the layout of my website when using the Div element. While it appears correctly in Internet Explorer, the display gets distorted in Firefox and Google Chrome when the div is expanded. I have searched online for solutions b ...

asp.nethtmlcross-browser

The MuiPrivateTabScrollButton alters the dimensions and flexibility properties using CSS

I have been facing a challenge with overwriting the css of MuiPrivateTabScrollButton. Since this class is generated from material ui, I am unable to successfully overwrite it. Despite debugging and trying various fixes such as adding border colors, I still ...

htmlcssreactjsmaterial-ui

Binding values in Vue.js with a prefix and suffixCreating bindings in Vue

I attempted to bind a value to an input by using a variable declared in the data object, but I also need to include a prefix and a suffix. <input id="topnavback", v-bind:value="rgb({{themestopnavback}})", class="jscolor"/> The value "themestopnavba ...

htmlvue.jsjscolor

When attempting to change an image using JavaScript, the image fails to load

I am having trouble understanding what is wrong with my code. <html> <body> <script type="text/javascript"> function changeImage() { var image = document.getElementById('myImage'); if (image.src.match("bulbon")) { ...

javascriptjquerycsshtml

Which is the better option for opening a link in a button: using onclick or href?

What is the most effective way to open a link using a button? <button type="button" onclick="location='permalink.php'">Permalink</button> <button type="button" href="index.php">Permalink</button> ...

javascripthtmlcss

Effective methods to prevent the `translate` transform from triggering an element to be perceived as position relative?

I am encountering an issue with an absolutely positioned div that is nested within a statically-positioned parent container. I noticed that when I apply the transform: translateY(-50%) property to the container, the child element behaves as if it were bein ...

htmlcsscss-positioncss-transforms

Can we keep a portion of the input placeholder content?

The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...

htmlcssbootstrap-4

The window.load() function seems to be malfunctioning as the event is not being triggered. There are no error

I'm struggling with getting the window.load() event to trigger on this specific website. The issue arose last night and despite there being no visible js or php errors, pinpointing the root cause has proven to be quite challenging. In syrp.home.main ...

javascriptjqueryhtml

Set the background of the div element behind the image

I am trying to create a layout where the div color matches the size of an image behind it, with the image moving slightly on hover. Here is my code: <div class="row text-center about__gallery"> <div class="col-xs-12 col-sm-4"> <div cl ...

htmlcsssass

Efficiently loading Angular views with lazy loading techniques

I am currently working on a calculator website powered by Angular. This single-page site is fully responsive and divided into 7 sections, each featuring different calculators based on user preferences. To improve loading time, I am interested in implementi ...

htmlangularjs

Make the div stretch across the entire width of the page, excluding the width of a fixed div located on the right side, without needing to set a margin-right property

I've been struggling to find a solution for my wiki development project. My challenge involves designing a page layout with a fixed-width sidebar on the right, while ensuring that content to the left of the sidebar adjusts its width accordingly. I wan ...

htmlcsswidthinline

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Enhance your website with Bootstrap 5's responsive rounded corners feature

Utilizing Bootstrap 5.3.1, I have successfully implemented responsive borders using the Utility API. My CSS file includes classes such as .rounded-top-sm-4 and .rounded-end-sm-4. # utilities_custom.scss @import "bootstrap/functions"; @import &quo ...

csstwitter-bootstrapbootstrap-5

React not displaying wrapped div

I am facing an issue with my render() function where the outer div is not rendering, but the inner ReactComponent is displaying. Here is a snippet of my code: return( <div style={{background: "black"}}> <[ReactComponent]> ...

javascripthtmlcssreactjsreact-native

Creating identical class names for UL elements underneath LI using JavaScript

In my attempt to dynamically generate the class name within the ul element, I successfully achieved the expected result. The outcome can be viewed in the console of the snippet provided for reference. However, I'm facing a challenge when attempting t ...

javascripthtmlcssclassforeach

Looking for assistance in streamlining the code

On my Drupal page, I have multiple divs and a JavaScript function that checks for content inside each one: if ($('.accred').length) { $('#accred').show(); } else{ $('#accred').hide(); } // More code follows... T ...

javascriptjqueryshow-hidehtml

Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width? I need the height of the images to dynamically adjust and match the width, even when the window is resized. For example, if the image width is 500px, the height should also ...

htmlcss

The width of Bootstrap 5.3.0 form checkboxes varies between options

CSS input[type='checkbox'] { transform: scale( 2 ); margin-right: 1.5em; } Html <div class="form-check d-flex align-items-center mb-3"> <input class="form-check-input" type="checkbox" value=&quo ...

cssbootstrap-5

"Blank Canvas: Exploring the Void in Laravel Blade Templates

This is the route that I am using Route::get('login', function(){ return View::make('admins.login'); }); In this code, I have created a admins/login.blade.php file to handle the login view. <!doctype html> <html> < ...

phphtmllaravellaravel-4laravel-blade

Angular 11.0.3 displaying ngClass issue (Unable to bind ngClass as it is not recognized as a property of div)

While working on an angular project, I implemented a light and dark theme using mat-slide-toggle to switch between themes. The theme is stored as a boolean called isDark in a Behavioral Subject service. There are two lazy-loaded modules - one for the home ...

htmlangulartypescriptsass