Bootstrap4: combining card header and navigation into a single row

How can we use Bootstrap 4 to position navigation and text within a Card Header in order to have them display on a single row?

<div class="card">
  <div class="card-header">
  Heading
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#">Nav 1</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 2</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 3</a>
      </li>
    </ul>

  </div>
  <div class="card-body">
    ...      
  </div>
</div>

The HTML code provided ensures that the navigation appears on the same line as the heading:

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

The goal is to have the heading aligned to the left, while the navigation items are aligned to the right within the Card Header.

javascriptcssbootstrap-4navigation

Answer №1

To incorporate the heading as a list item (<li>), you can use the following code snippet...

li {
  margin-left: 5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="card">
  <div class="card-header">

    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        Heading
      </li>
      <li class="nav-item">
        <a href="#">Nav 1</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 2</a>
      </li>
      <li class="nav-item">
        <a href="#">Nav 3</a>
      </li>
    </ul>

  </div>
  <div class="card-body">
    WHATEVER... really...
  </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

Are CSS designers setting boundaries for their designs by restricting themselves to layouts that can be handled by CSS from the start?

After seeking guidance on reaching CSS zen in this forum, I have come to realize that my struggles largely stem from positioning. Some sources suggest that CSS may not always be the most efficient layout system. As CSS designers, do we limit ourselves fro ...

css

What is causing the issue with useForm not being identified as a function?

error image Why is this error occurring when attempting to use useForm: ⨯ src\app\journal\page.tsx (18:53) @ useForm ⨯ TypeError: (0 , react_hook_form__WEBPACK_IMPORTED_MODULE_5__.useForm) is not a function at Page (./src/app/journal/pa ...

javascriptreactjsnext.jsuse-formshadcnui

An effective method for converting MongoDB's JSON array of UTC dates to local time using Node.js

Using Node.js to query MongoDB and encountering an issue with Date (ISODate) fields. After querying, the Date format returned is as follows: DT : 2014-10-02T02:36:23.354Z The goal is to efficiently convert the DT field from UTC to Local Time ISOString. F ...

javascriptjsonnode.jsmongodb

Utilize CSS to incorporate special characters as list markers

Is there a way to use CSS to make the list marker in an HTML list display as "►"? ...

htmlcsshtml-lists

Unable to get 100% height to work properly in HTML5 ASP.net because of the DOCTYPE

I'm currently working on creating an Asp.net website with a unique single-page portfolio style for the homepage. Each project or section should be 100% height of the viewport, stacked underneath each other to make use of anchor tags. However, I'm ...

cssasp.nethtmlheight

The candy stripes on a loading bar zebra assist in creating a unique and

I'm in the process of creating my portfolio and I'd like to incorporate unique animated loading bars, such as vertical or horizontal candy stripes, to showcase my coding skills. Can anyone suggest a specific programming language or tool that woul ...

javascripthtmlcsscandy

Smooth carousel navigating through dots

I am currently using the slick carousel from http://kenwheeler.github.io/slick, and I am looking for a way to limit the number of dots to 8 even when there are more than 8 slides. The navigation dots should include arrows on the left and right sides to in ...

javascriptjquerycsscarouselslick.js

PHP - Issue with submitting form data using $_POST from within a Div text container

Having some trouble with the submission of the "about_me_container" div in my form using $_POST. I know that divs are not typically used with $_POST, so I tried changing the div to input type="text" and textarea but it still won't work. I also attempt ...

javascriptphphtmlformspost

Vue: auto-suggest feature in a text input field

I am looking to implement a text field with typeahead functionality. Essentially, I have a collection of words and as you start typing in the field, suggestions should appear based on the input. The challenge is that it should be capable of providing sugge ...

htmlcssvue.js

Conceal elements with a single click of a button

How can I use jQuery to hide all li elements with an aria-label containing the word COMPANY when the Search from documents button is clicked? Here is the HTML code: <ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content" id="ui-id-1" t ...

javascriptjqueryhtmlevent-handling

Disable the default Bootstrap styling for the pre element

Utilizing Bootstrap has caused the <pre> tag in my code to be styled, which I find undesirable. Despite knowing that I can override it, pinpointing the specific attributes that need adjustment to revert <pre> back to its default HTML appearance ...

csstwitter-bootstrappre

Troubleshooting border problems with Bootstrap 3 tables

Recently, I encountered a problem with the Bootstrap 3 table-bordered where the right border was not showing up. Below is the code snippet of my table: <table class="table table-bordered table-hover"> ... </table> Upon inspecting the table vi ...

htmltwitter-bootstrapcss

executing a "background process" in javascript

Can JavaScript execute functions in the background? I am using the pdfmake tool to generate a PDF within an AngularJS application, but the generation process takes around 3-4 seconds and causes the UI to freeze completely. I want to run a background task ...

javascriptangularjspdfmake

Difficulties encountered when trying to create a basic timeline using Moment JS

I'm in the process of developing a straightforward report that retrieves entries through an ajax request and I aim to organize my entries by the day of the week. My desired output would look something like this: ---------------------------------- Mon ...

javascriptjqueryajaxmomentjs

Issue with Angular 6 subscribe event not being caught by subject?

A new element was crafted to house a loader: @Component({ selector: 'app-loader', templateUrl: './loader.component.html', styleUrls: ['./loader.component.scss'], providers: [LoaderService] }) export class LoaderCompon ...

javascriptangular

Struggling to configure Velocity Js?

After attempting to use Velocity Js for the first time, I encountered some issues while trying to create a navigation menu. Despite having functioning code and animations, the menu failed to open. I followed the instructions on the Velocity JS site by incl ...

javascriptjqueryvelocityvelocity.js

Color-coding HTML table cells depending on the SQL flag value

After successfully constructing a SQL query that incorporates three conditions from my database table and sets a flag based on them, I have made progress in my project. The query looks like this: UPDATE staging SET `miuFlag` =1 WHERE `lowSideMIUNumAr ...

phphtmlcssmysql

Are memory allocations made for empty indices in Typescript Arrays?

I am faced with the challenge of replicating a segment of a server-side database for processing within a typescript web application. My goal is to access specific records by their integer ID in typescript. The issue at hand is that the indices may not be s ...

javascriptarraystypescriptmemory

Using v-model in Vue 3 will result in modifications to the table class in Bootstrap 5

Below is a snippet of the code I wrote: <table class="table table-striped"> <tr class="table-dark"> <th>#</th> <th>Column 1</th> <th colspan="3">Column 2</th> </tr> <tr ...

javascripthtmlcssvuejs3bootstrap-5

Navigating the AngularJS Directive Controller

I am encountering difficulties while trying to access my controller within a directive that I am attempting to unit test using jasmine and karma testrunner. The structure of the directive is as follows: directive angular.module('Common.accountSearch ...

javascriptangularjsunit-testingjasminekarma-runner