Struggling with the proper sizing and specificity of the navbar class in Bootstrap 4

I'm currently experimenting with the nav utilities in Bootstrap 4. I've noticed that they automatically function as a flexbox. My goal is to make the navigation vertical until it reaches the medium breakpoint (md), at which point it should switch to horizontal layout. When in the vertical position, I want the nav to take up 20% of the viewport, and when horizontal, I want it to utilize the container-fluid class. I tried setting the width to 20% for .flex-column, but this affects both configurations. Any assistance would be greatly appreciated. Thank you. Here is my code: 

.flex-column {
  width: 20%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul class="nav nav-pills flex-column flex-md-row justify-content-center border">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  </ul>
</div>

htmlcssbootstrap-4

Answer №1

Utilize Media Queries to specifically target medium-sized devices. Another option is to use vw instead of % for viewport width.

@media (max-width: 992px) {
  .flex-column {
    width: 20vw;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul class="nav nav-pills flex-column flex-md-row justify-content-center border">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  </ul>
</div>

Answer №2

It may not be achievable using only bootstrap classes. Here is a code snippet to create a vertical navigation on small screen devices:

@media (max-width: 768px) {
  .w-s-20 {
    width: 20% !important;
  }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul class="nav nav-pills d-flex flex-column flex-md-row justify-content-center border w-s-20 ">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
  </ul>
</div>

I suggest utilizing the most recent version of bootstrap.

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

Can the <p> tags be aligned to ensure they are evenly spaced?

Is there a way to transform this https://i.sstatic.net/944F8.png Into this: https://i.sstatic.net/k4Ch8.png I want the second column to be uniform across all categories. Here is how my current code appears: <div class="prod-card-f ...

htmlcss

Showing a Javascript Object on an HTML Page

I am looking to showcase the "users email" directly on my HTML page as plain text. Currently, my project involves three distinct files: index.html - edit.html - my_parse_app.js Within my_parse_app.js, I define all my JavaScript and jQuery functions for ...

javascripthtml

Guide to setting a dynamic value for an input List property in Angular

How can I render multiple dropdowns in Angular based on the response from an API? Currently, when I retrieve data from the API, I am seeing the same information displayed in both dropdown controls. Is there a way to assign dynamic values to the "list" prop ...

html.netangularjstypescript

CSS Grid expands the item width on its own when there is still space left

Having some queries regarding the piece of code provided. Currently, I have a collection of 5 cards displayed in rows of 3 cards each using the styling grid-template-columns: repeat(3, minmax(200px, 1fr));. My concern is whether there is a way for the 4th ...

javascripthtmlcss

Identifying activity on a handheld device

I am currently working on a website and I have noticed that it doesn't work as well on mobile devices as it does on desktop. There are performance issues that need to be addressed. I've seen other websites redirecting users to a different page wh ...

javascripthtmlcssmobile

Ways to transfer data between Angular controller and jQuery

Looking for some guidance on how to toggle between two HTML divs based on user input validation using an Angular controller and jQuery animations. Each div contains input fields that need to be validated before moving on to the next stage. Here is a simpli ...

javascriptjquerycssangularjs

Transfer the choices from a dropdown list to a different JSP page

In my current JSP code, I have a select element that looks like the following: <select name="withoutAccess" size="5"> <c:foreach var="item" items="${obj.withoutAccess}"> <option>${item}</option> </c:foreach> </sel ...

htmlformslistjsp

Identifying when the mouse hovers over a hidden element

Is there a way to make events trigger for <mark> elements under a <textarea>? I've tried adding mouseover listeners, but they don't seem to work because of the <textarea>. I need the <text-area> to function normally, so u ...

javascripthtmlcss

What is the best way to highlight a button once it has been activated?

Here is an HTML button: <button autofocus role="button" ng-disabled="something.$invalid">{{ Continue }}</button> The button starts off disabled, so the autofocus attribute doesn't work. My goal is to have focus on the button as soon as i ...

javascriptangularjshtml

show a picture and text side by side

Here's the CSS code I'm using: <style type="text/css"> #box { width:100%; height:80px; background-color:#eeeeee; } .box-inner { width:80%; margin:0 auto 0 auto; text-align:center; } #text, #text a { font-siz ...

css

Using the map method to print from a massive array collection in sets of 20

Given a large array of numbers, I am attempting to divide it into sets of 20 numbers and print them. However, when I try to iterate through the array with an if condition, I get undefined values. I thought of creating a result array and pushing the subset ...

javascripthtmlarraysjsonecmascript-6

Attempting to bind an input parameter using NgStyle in Angular version 2 and above

Issue: I am in need of a single component (spacer) with a width of 100% and a customizable height that can be specified wherever it is used in the HTML (specifically in home.html for testing): number 1 <spacer height="'200px'"></spa ...

javascripthtmlcssangularbinding

What is the best way to add indentation to HTML code in a code tag?

Looking to insert some Python code into an HTML document using the code tag. Here is an example: <code> for iris, species in zip(irises, classification): if species == 0: print(f'Flower {iris} is Iris-setosa') </ ...

pythonhtml

What is the best way to show or hide a child element when I hover over its parent?

Here is a snippet of HTML code for you: <style> .icon {display:none;} </style> <ul> <li>ABC <i id="abc" class="icon">x</i></li> <li>DEF <i id="def" class="icon">x</i></li> <l ...

javascriptjqueryhtmlajaxasynchronous

Include a stylesheet as a prop when rendering a functional component

Using Next.js, React, Styled JSX, and Postcss, I encountered an issue while trying to style an imported component for a specific page. Since the stylesheets are generated for a specific component at render time, I attempted to include custom styles for the ...

javascriptcssreactjsjsxnext.js

How can you eliminate the space below the items in Bootstrap pagination?

How can I remove the strange gap/space below the pagination items in Bootstrap? https://i.sstatic.net/zGhOD.png Here's the code snippet: <header role="navigation"> <!-- justify-content-end is only available on bootstrap 4 --> <n ...

htmlcsstwitter-bootstrappagination

Events Calendar with Jquery

Can anyone offer guidance on creating a basic calendar with highlighted events? I'm looking for the quickest and easiest method, preferably through a jQuery plugin. Any suggestions? ...

jqueryhtml

Creating eight equal sections within HTML <div> elements using Bootstrap

I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...

htmlcssangularbootstrap-5

Issue arising from the presentation of the main object along with certain dependent objects on the table

I am encountering some difficulties with displaying a list of objects retrieved from the back-end. Here is my parent object: export class Regle { itRegle: number; isDemande: boolean; dateCreation: string; dateFinPrevu: string; descriptionRegle: ...

htmljsonangulartypescript

Clicking on an element will remove a class and unselect an input using JQuery

Trying to achieve a functionality where clicking on a list item with a radio button input selects it, but clicking again deselects it. The issue is despite various attempts, nothing seems to work properly. function setupToptions() { if ($('ul.top ...

javascriptjqueryhtml