What is the best way to ensure that the bootstrap nav tab content fits perfectly on one line?

Check out this bootstrap navbar example

You can see a screenshot here.

  <ul class="nav nav-tabs" style="display: inlne-block">
    <li class="nav-item" style="text-align: center;  display: inline;">
      <div>
        <a class="nav-link active show p-1" data-toggle="tab" href role="tab">1</a>
        <button type="button" class="btn btn-white" style="margin-left: 7px;">Brick 1</button>
      </div>
    </li>
    <li class="nav-item" style="text-align: center;  display: inline;">
      <a class="nav-link active show p-1" data-toggle="tab" href role="tab">2</a>
      <button type="button" class="btn btn-white" style="margin-left: 7px;">Brick 2</button>
    </li>
  </ul>

The requirement is for the a and button elements to be displayed in a single line. Since each element has its own event handler, they cannot be nested within each other.

An attempt was made using this solution with display: inline, but it did not achieve the desired outcome.

You can view the code on JSFiddle here.

javascriptbootstrap-4

Answer №1

To create a flex layout for the nav-items, apply the d-flex class to each of them...

 <ul class="nav nav-tab">
     <li class="nav-item d-flex" style="text-align: center">
        <a class="nav-link active show" data-toggle="tab" href role="tab">1</a>
        <button type="button" class="btn btn-white btn-pump-data" style="margin-left: 7px;">Pumpe 1</button>
     </li>
     <li class="nav-item d-flex" style="text-align: center">
         <a class="nav-link active show" data-toggle="tab" href role="tab">2</a>
         <button type="button" class="btn btn-white btn-pump-data" style="margin-left: 7px;">Pumpe 2</button>
     </li>
 </ul>

Codeply

Answer №2

To align the anchor tag to the left, apply the CSS rule float:left.

a{
 float:left;
}
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <ul class="nav nav-tabs">
    <li class="nav-item" style="text-align: center">
      <div>
        <a class="nav-link active show p-1" data-toggle="tab" href role="tab">1</a>
        <button type="button" class="btn btn-white btn-pump-data" style="margin-left: 7px;">Pumpe 1</button>
      </div>
    </li>
    <li>
      <a class="nav-link active show p-1" data-toggle="tab" href role="tab">2
        <button type="button" class="btn btn-white btn-pump-data" style="margin-left: 7px;">Pumpe 1</button></a>
    </li>
  </ul>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</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

How can I remove the outline when focusing with the mouse, but still retain it when focusing with the

Is there a way in JavaScript to detect if an element received focus from the keyboard or mouse? I only want the outline to show when it's via the keyboard, not the mouse. If this is possible, how can I override the browser's default outlining be ...

javascriptjqueryhtmlcss

Encounter issue when using GAS withSuccessHandler function

I've developed a Google Sheets add-on that utilizes a modal dialog for the user interface. I encountered an issue with the success handler not running as expected, so I created a basic test interface to troubleshoot the problem. After the server-side ...

javascriptgoogle-apps-script

What is the best way to link my React application with my Express API?

I've been immersed in my react app project for a while now, and I've recently delved into developing a server (using node and express) as well as planning to incorporate a database for it (MongoDB). My client-side react app has been smoothly run ...

javascriptreactjsexpress

Scaling a mesh and BufferGeometry vertices using THREE.OBJLoader

Utilizing the THREE.OBJLoader, I successfully loaded a 3D model into my scene. Subsequently, I have the necessity to scale it by 10 and then extract its vertices position. I am aware that the THREE.OBJLoader provides a BufferGeometry, allowing me to acce ...

javascriptthree.jsbuffer-geometryobjloader

Unable to retrieve the JSON response sent by the REST API within an HTML page

My ajax function is unable to properly receive the JSON content generated by a REST API. The REST API successfully creates the JSON data, but when passed to my ajax function, it does not work as expected. function loadJsonData(){ var dropDownValue = ...

javascriptjavajqueryajaxrest

Obtain the printed value of a button via PHP and manipulate it using JavaScript

I have a dynamic table that displays results from a database. <table id="table" class="table datatable-responsive"> <thead> <tr class="bg-teal"> <th>#</th> <th>Date & Time</th& ...

javascriptjquery

Tips for creating unique names for JSON data modification functions

I have some data stored in JSON format that I need to slightly rearrange before sending it to the client. What should I name the function responsible for this reordering? Is serializeSomething a suitable choice? From what I understand, serialization invo ...

javascriptjsonserialization

Is it possible to create a personalized serialize form when sending an AJAX POST request

How can I format form data on an AJAX POST request differently than the default $("#formid").serialze()? The current result is not suitable for my needs, as it looks like this: `poststring="csrfmiddlewaretoken=bb9SOkN756QSgTbdJYDTvIz7KYtAdZ4A&colname= ...

javascriptajaxjsondjangopost

Utilizing Typescript Decorators to dynamically assign instance fields within a class for internal use

I am interested in delving into Typescript Decorators to enhance my coding skills. My primary objective is to emulate the functionality of @Slf4J from Project Lombok in Java using Typescript. The concept involves annotating/decorating a class with somethin ...

javascripttypescriptloggingdecoratorlombok

Using jQuery to toggle the visibility of table data cells across various tables on a single webpage

On my webpage, I have multiple tables and I'm trying to add more rows or close table data cells using jQuery. However, I seem to be encountering an issue as it's not working properly. <table class="table" ><tr> < ...

javascriptjquery

Strategies for preventing multi-level inheritance of TypeScript class properties and methods

In my current JavaScript class structure, the DataService is defined as follows: // data.service.ts export class DataService { public url = environment.url; constructor( private uri: string, private httpClient: HttpClient, ) { } ...

javascripttypescriptclassinheritancemultiple-inheritance

Leverage JQuery Mobile for smooth sliding and effortless deletion of list elements

Currently, I am testing a JQuery Mobile webpage that features a simple list setup: Upon clicking the list items, they get highlighted and their ids are saved in a local array. Is there an easy (or not so easy) way to transition the selected elements slidi ...

javascriptjqueryhtmljquery-mobile

Creating a promise to write data to a file

When executing the function, it creates a series of files but fails to write data to them. Strangely, omitting Promise.all at the end and not resolving the function actually results in the data being written to the files. It's puzzling that no matter ...

javascriptnode.jses6-promisefs

Unraveling HTML elements within a string using MongoDB: A step-by-step guide

Currently, I am in the process of creating a blog from scratch as a way to enhance my skills. The posts' content is stored as a long string in MongoDB with some random HTML tags added for testing purposes. I am curious about the conventional method fo ...

javascripthtmljsonreactjsmongodb

What could be causing the error 'i is not defined' in my Vue.js component script when using a basic for loop?

I have a task where I need to sort an array by version and then move all elements starting with 'ipad' to the end of the list. This code snippet is extracted from a single file Vue.js component: computed: { orderedUsers: function () { ...

javascriptvue.js

Why bother re-rendering components in React that haven't had any changes in their state?

Within my main component, I have both a state and a static component nested inside. An issue arises when the state changes and triggers a re-render of the main component, causing the static component to also re-render unnecessarily. import { useState } fro ...

javascriptreactjs

What is causing the consistent occurrences of receiving false in Angular?

findUser(id:number):boolean{ var bool :boolean =false this.companyService.query().subscribe((result)=>{ for (let i = 0; i < result.json.length; i++) { try { if( id == result.json[i].user.id) ...

javascriptangulartypescript

Use Vue JS to send a GET request to the server with custom header settings

When creating a Vue.js component, I want to send a GET request to a server with specific headers. How can I achieve this? Using cURL: -X GET "http://134.140.154.121:7075/rest/api/Time" -H "accept: application/json" -H "Authorization: Bearer eyJhbGciOiJSUz ...

javascriptvue.jsrequesthttp-headersrequest-headers

"Exploring the benefits of using nested mapping for res.json() in an Express application

I have been developing an express application (server-side) that offers movie information to users, and I am attempting to send a JSON response in the following format: { "title": "Star Trek: First Contact", "year": 1996, ...

javascriptapiexpressrestknex.js

Connected Date Selector

I am new to using Bootstrap and attempting to implement a linked datepicker with the following requirements: Display only the date (not the time). The default selected date on page load should be today's date for both the Datepicker and the text ...

javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker