Can a list be transformed into a toolbar in a responsive design?

Here is my card with a nav section that includes multiple items (although I've only included one here for simplicity).

<div class="col-md-3">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">title</h3>
        </div>
        <div class="card-body p-0">
            <ul class="nav nav-pills flex-column">
                <li class="nav-item">
                    <NavLink href="javascript: void(0);" @onclick="() => ShowSearch()" class="nav-link">
                        <span class="fa-li pl-5"><i class="fas fa-search" /></span>
                        <span class="pl-4">Search</span>
                    </NavLink>
                </li>
            </ul>
        </div>
        <div class="card-footer">
            <NavLink href="Back" class="nav-link">
                <span class="fa-li pl-5"><i class="fas fa-arrow-alt-circle-left"/></span> 
                <span class="pl-1">Back</span>
            </NavLink>
        </div>
    </div>
</div>

Despite displaying correctly, including on mobile devices, I am curious about the possibility of changing the appearance of the nav list to resemble a toolbar. This would involve positioning the items side by side within the card-body and displaying only their icons. For example:

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

Would it be feasible to achieve this transformation?

cssbootstrap-4sass

Answer №1

If you're looking to add icons in Bootstrap 4, the framework itself does not have built-in icon support. However, you can achieve the desired output by using a small font library. Here's how you can do it:

1)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a0c2cfcfd4d3d4d2c1d08dc9c3cfced3e0918e958e90">[email protected]</a>/font/bootstrap-icons.css" />

<div class="col-md-3">
    <div class="card">
        <div class="card-body p-0">
            <ul class="list-inline">
                <li class="nav-item list-inline-item">
                    <i class="bi bi-cart"></i>
                </li>
                <li class="nav-item list-inline-item">
                    <i class="bi bi-twitter"></i>
                </li>
                <li class="nav-item list-inline-item">
                    <i class="bi bi-person-fill"></i>
                </li>
                
            </ul>
        </div>
    </div>
</div>

OR

Alternatively, you can use Font Awesome to include icons:

<head>
    <title>Font Awesome Icons</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--OR download above link css to any folder and call-->
    </head>


<div class="col-md-3">
    <div class="card">
        <div class="card-body p-0">
            <i class="fa fa-shopping-cart"></i>
            <i class="fa fa-twitter"></i>
            <i class="fa fa-user"></i>
        </div>
    </div>
</div>

2)

After adding the icons to your toolbar, you can use @media CSS queries to ensure they are displayed correctly on different screen sizes:

For example:

.smallscreentoolbar
{
  display:none;
}
.largescreentoolbar
{
  display:block;
}

@media screen and (max-width: 600px) {
  .smallscreentoolbar{
    display: block;
  }
  .largescreentoolbar
  {
     display:none;
  } 
}

If you have any questions, feel free to leave a comment.

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

Elevation Ratio

Is there a way to make the height of the textarea in my demo always be 50% of the frame's height, even when resizing the frame? Currently, the textarea's height does not adjust dynamically. How can I achieve this? html, body { line-heigh ...

htmlcss

Incorporate a smooth infinite scroll feature in a CSS carousel that seamlessly loops without

Looking for a solution to the carousel jerk issue when it reaches the end of the loop? Is there a way to seamlessly loop start without any noticeable interruptions? Here is the code in question. Avoiding the use of JavaScript, is there a method to achieve ...

htmlcsscss-transitions

Automatic width table design

I am trying to position the "User ID" label closer to its value by aligning it to the right side, as shown in the picture below. I have attempted using additional colspan's but haven't been successful. The User ID can contain anywhere from 1 to 9 ...

htmlcsshtml-table

Achieving Content Centering in React Material UI: A Guide to Aligning to the Middle of the Page

Currently, the button is displaying in the top left corner. How can I move the button to the center of the page? import {Button} from '@mui/material'; function App() { return ( <Button variant="contained">Hello World</ ...

cssreactjsmaterial-ui

What is the best method to calculate the dimensions of flex items without relying on percentages?

Imagine this as the structure of my HTML, with an unspecified number of div elements: <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div>& ...

htmlcssflexbox

Import the information into a td tag's data-label property

I have implemented a responsive table design that collapses for smaller screens and displays the table header before each cell. body { font-family: "Open Sans", sans-serif; line-height: 1.25; } table { border: 1px solid #ccc; border-collapse: co ...

javascripthtmlcsshtml-tableresponsive

As the div elements stack up and you scroll towards the top or bottom

I am dealing with two nested DIVs that are both scrollable. When I scroll the "inside div" (the green one in the attached file), and reach the bottom of the DIV, it starts scrolling the DIV beneath it. How can I prevent the DIV beneath from scrolling only ...

htmlcss

Floating hover box gracefully descends as you hover over it

While working on this particular site, I encountered an issue with the password being set as joint123. There was a map displayed with icons on the right side, and when hovering over the icons, the corresponding address would appear. However, the problem ar ...

htmlcsshover

How can I prevent the expansion of elements in a drop-down menu when using display:

I've been struggling to implement a drop-down feature in my menu. The issue is that when I use display: flex, hovering over the drop-down also expands all other boxes without drop-downs. Any ideas on how to fix this easily? Additionally, is there a w ...

htmlcssflexboxfrontend

What is the best way to adjust the height of a row in a Material UI table using CSS

I've been attempting to establish a row height of 30px for a table (https://material-ui.com/components/tables/), but it seems that the minimum I can set is 53. Why is this restriction in place? How can I adjust the row height to 30px using CSS based ...

cssmaterial-ui

Tips for adjusting the button spacing on a bootstrap navbar

As someone who doesn't work on front-end tasks frequently, I have encountered an issue while creating a navbar using Bootstrap. The problem arises when trying to add multiple buttons as it causes the spacing between them to appear strange. Does anyon ...

htmlcssbootstrap-5

Fuzzy background when you scroll

My container has an image that blurs when you scroll down the page by 50 pixels. I feel like I've seen this effect somewhere before, but I can't quite recall where. I want the text to remain unaffected and not turn blue. Here is the HTML: <d ...

javascriptjqueryhtmlcss

Styling your div elements in CSS to shrink in width relative to their parent container

.container { max-width: 750px; height: 100px; background-color: red; margin: 0; padding: 0; } .box1 { width: 100px; height: 100%; float: left; background-color: black; } .box2 { width: 650px; height: 100%; fl ...

htmlcss

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...

javascriptjqueryhtmlcss

Show a directional indicator on hover in the date selection tool

I am currently using a datepicker that looks like this: https://i.sstatic.net/XsrTO.png When I hover over it, three arrows appear to change days or show the calendar. However, I would like to remove these arrows. Here is the code snippet: link: functi ...

javascriptjqueryhtmlcssdatepicker

Instructions for retrieving data from a weather API using JavaScript

Hello amazing Stackoverflow community! I need your help to figure out how to extract data from a weather REST API using JavaScript. I'm struggling to fetch the weather condition and date/time information from this API. { info: { _postman_i ...

javascripthtmlcssnode.js

Revamping repetitive JavaScript code for the pagination of Instagram Stories

I'm currently developing a website that utilizes fullpage.js and includes a section with multiple slides. These slides automatically transition every 10 seconds. I wanted to implement progress bars similar to those on Instagram, where each bar fills ...

javascripthtmlcsspaginationinstagram-story

Fixing the bootstrap delete modal to only delete the initial row

I'm facing an issue where only the first row gets deleted when I try to delete a row in PHP using Bootstrap modal. ajout.php is the page where I trigger deleteEntreprise.php with an ID. $pdo = new PDO('mysql:dbname=test;host=localhost',&ap ...

phpmysqlbootstrap-4

The text box and buttons are not properly aligned

https://i.stack.imgur.com/lxeKw.png I am puzzled by the misalignment of my buttons and text box. <div class="form-group"> <label class="control-label col-md-3 col-sm-3 col-xs-12" for="Pic">Picture/File</label> <div class="col ...

htmlcssbootstrap-4

Positioning my login form in the right spot is proving to be a challenge

I'm working on integrating this form into my website, but I'm having trouble placing it in the top right corner of the header. Below is the HTML code: $(function(){ var $form_inputs = $('form input'); var $rainbow_and_b ...

htmlcssforms