2022 Developer Survey is open! Take survey.

Questions tagged [bootstrap]

questions about twitter's open source bootstrap framework

Filter by
Sorted by
Tagged with
0 votes
1 answer
49 views

Different heading sizes for different platforms in design tokens [closed]

Currently I'm doing an experiment with my first Design System(I have chosen Bootstrap) and Design Tokens(Style Dictionary npm module) I configured and build all good, Later I wanted to achieve as ...
user avatar
2 votes
1 answer
164 views

What is the best way to add edit and delete buttons to a modal?

I have a task data visualization modal, but I need to add an option to edit or delete these tasks. Where in this modal could I insert buttons to delete or edit?
user avatar
2 votes
0 answers
82 views

How can I make an essential navigational treeview sidebar work on mobile?

I'm currently working on a web application that will have significant user-created content. I would like to organize this content hierarchically, with a side-bar on the left to navigate, some buttons ...
user avatar
  • 133
0 votes
0 answers
37 views

Best way to show employee performance data in 5 minute blocks for multiple employees performing various tasks throughout the day?

I am working on web development project that will let warehouse managers view their employee's performance. There are nine different tasks that an employee does repeatedly throughout the day. The ...
user avatar
  • 101
3 votes
1 answer
266 views

Best way to display an editable list of list

I'm working on a web project and I have a list of list which can be edited. It's displayed within a modal, I can resize it as I want so it's not that big of a deal. My main problem is I don't really ...
user avatar
-1 votes
1 answer
45 views

What design changes will improve visual appearance of the calculator [closed]

This is the HTML code for a very basic calculator. I am at beginner level on bootstrap and definitely beginner level designer. what are some changes i can do to make the visual appearance better. i ...
user avatar
2 votes
3 answers
652 views

Better layout of many checkboxes with help text

I have a page for configuring access rights in a website. There are a number of checkboxes in the form. Each of these checkbox have a help text hover tooltip that provides a more detailed explanation ...
user avatar
1 vote
1 answer
102 views

Too large space for input fields

I'm struggling with a form (in Bootstrap 4) which takes the whole (fixed) container width, there is nothing else displayed on the screen. It looks okay-ish on smaller screens, but on large ones it's ...
user avatar
  • 113
0 votes
1 answer
75 views

Is it a problem if my form takes up twice as much space in web form than it does in the desktop application?

I am trying to migrate some forms from a desktop implementation to a web implementation, which should still primarily be used by desktop users. Currently, we have a generic out-of-the-box theme (the ...
user avatar
  • 101
2 votes
2 answers
632 views

Responsive nav sidebar with company logo and information

Currently, our team's browser app looks like this: up to this point, we built our app to target desktop. However, because we're moving to Android, it is imperative that we can also effectively ...
user avatar
2 votes
2 answers
131 views

Best way to display a lot of schools information on a single webpage?

I'm a front end developer and I need a page to display information about all schools in my city (52). I tried using Bootstrap Cards and an input where the user will type and the cards bellow will be ...
user avatar
1 vote
1 answer
102 views

Configuration for a timegrid

I have a React+Bootstrap app which displays a timeline of events, to which the user can add a grid, with vertical markers at regular intervals. The default interval is 1 second, so a vertical line is ...
user avatar
  • 113
2 votes
2 answers
202 views

Bootstrap nav bar with variable background color - best way to handle this?

I'm working on the UX for an application with a bootstrap top navigation bar whose background color will not be consistent because resellers can change it to match their branding. At the moment, the ...
user avatar
0 votes
1 answer
272 views

Best way to organize search form interface?

I have a tab in my application where users can search Accounts. The account table has two different types of accounts, User and Staff type. User type is one that has a username, password, etc. Staff ...
user avatar
0 votes
2 answers
223 views

Long List and details in same panel

I'm Using bootstrap collapsable panel to display a list of items (revisions) in table format, I want to display the details of each item in the panel next to the table, this looks cluttered now, ...
user avatar
1 vote
2 answers
414 views

What heading to use in a Bootstrap alert [closed]

In Bootstrap there are dedicated alerts. https://v4-alpha.getbootstrap.com/components/alerts/ According to the code on that site, the headings in an alert shall be h4, but I'm not quite sure that's ...
user avatar
2 votes
2 answers
211 views

Where to place the button to open a DataTable and fill input fields based on selection?

I have a wizard that has four steps. On the first step, there is a form with user data inputs. I need to have a button that opens up a modal with a datatable, and based on the selection on that table, ...
user avatar
  • 21
1 vote
1 answer
65 views

Language pair lists

I need to implement UI for language pair selection in Chrome extension. The simplest solution is 2 comboboxes with language list (variant 1). But i think it takes too long to open a combobox, find ...
user avatar
  • 107
1 vote
1 answer
88 views

Need help with button layout on small device

I have the following button layout on my web app and it looks fine on larger screens.. On portrait iPad or smaller it looks like this.. I'm not sure what the best way to display, hide/show these ...
user avatar
  • 113
0 votes
1 answer
52 views

How to improve the usage of multiple similar data

I want to improve mock which is basically a form with similar data all around. The product I'll be discussing here is web, based on a modified bootstrap 3 look. Where I work, we are now discussing a ...
user avatar
1 vote
1 answer
823 views

What's a good way to display Important Notice headings on a blog?

I have a blog/content website that has notices on the landing page, done using Bootstrap. A notice is a piece of time-critical information that expires (almost, but not quite, an alert). There won't ...
user avatar
  • 111
0 votes
1 answer
150 views

What are the benefits and drawbacks of using 2 or more CSS Framework? [closed]

I have experience in Bootstrap, Foundation, and Sematic UI. On my next application, I am planning to use Bootstrap for Grid Foundation for Menu & Side nav Semantic UI for Forms, icons, etc. ...
user avatar
  • 101
0 votes
3 answers
124 views

Why would users prefer to use a diluted layout when given the choice?

Some web apps from Google such as Gmail and Drive offer a "comfortable" option with lots of wasted white-space, which I'll refer to as being diluted for lack of a better term. I'm creating a web app, ...
user avatar
  • 339
0 votes
1 answer
109 views

How can I design my form better? [closed]

I have a price calculation form which looks very basic. I want to make it look little better. Like the '+' and '-' button look like bootstrap button and having a shadow. I also want to have a subtle ...
user avatar
  • 1
3 votes
1 answer
152 views

Why are left nav bars becoming more popular in darker colours?

Over the past 18 months i have noticed that a lot of twitter bootstrap admin and other themes with left nav bars are now using a black or dark blue colour. e.g. https://wrapbootstrap.com/themes/admin ...
user avatar
1 vote
1 answer
779 views

What are the differences between icon and button badges?

iOS style badges are overlayed atop the upper right part of the icon. It's usually red with white text. When displayed inline on a button or next to a header or link, IMHO, the badge seems to take on ...
user avatar
0 votes
1 answer
253 views

Adding/cloning a section of form repeatedly in a modal popup

Here is the scenario: There is a modal popup in which each step has a certain form fields. on the last step, I need to repeat a section (last 3 fields) on a form repeatedly. Here is what I thought: ...
user avatar
6 votes
5 answers
762 views

User choose between % or $

I'm working on an e-commerce application and have come across this scenario multiple times. The user needs to enter an amount, which can be in dollars (any currency) or percent. The crux of the ...
user avatar
  • 163
0 votes
2 answers
622 views

Single Input Form - Save button below or to side?

I'm playing around with Bootstrap's Input Group Addons and I'm struggling to decide which is better from a UX perspective. versus: This is a single input form to add priorities to a list (for ...
user avatar
  • 103
3 votes
3 answers
452 views

UI For Selecting Column Width

I'm creating an application that builds a form using simple UI options (a la Cognito or Wufoo). My current issue is that I'm trying to think of a way to display an option to define the width of the ...
user avatar
  • 1,629
1 vote
2 answers
309 views

Separating components in a component-based UI [closed]

I've got a page for a Team Overview that currently shows everything that is possible to do with a team. I think that the design for this is loud and hard to read at first glance. The current ...
user avatar
0 votes
3 answers
588 views

How do I make extremely basic data look presentable? [closed]

I have a modal that is so boring and ugly I cannot stand to look at it. In a user table, the user can press a button to view all details about the user (the table only shows name, role, etc). This ...
user avatar
3 votes
1 answer
142 views

Advice on how to re-order elements for smaller screen size

I have a web app that displays data in tables. And there's different options to display that data. In full size the options show as follows: The two blank boxes are input boxes and together with the ...
user avatar
  • 31
0 votes
2 answers
6k views

Bootstrap:Multiple page navigation within a modal

I am working on a sprint management tool.The scrum master gets to select from a list of bugs available to him. Once he selects and hits 'Add bugs' - he needs to provide the justification individually ...
user avatar
  • 105
1 vote
1 answer
960 views

Field allignment with error labels

I am looking for possible solutions that could be used to make our forms look better when displaying errors. Our application is using Government of Canada Intranet Theme (WET 4) with bootstrap. The ...
user avatar
1 vote
1 answer
135 views

Are there any practical reasons as to why one should show css outline on a focused radio button?

A while ago, I found a css stylesheet for checkboxes and radio buttons, which could use font-awesome icons as symbols. I had just used the checboxes until recently, but expanded my form to include ...
user avatar
  • 195
2 votes
1 answer
582 views

Display many checkboxes

The context I am currently working on a project in ASP.NET MVC5.2 with Twitter Bootstrap. The user will be experienced in IT as it concerns an internal tool. The user is able to set different kinds ...
user avatar
  • 123
0 votes
2 answers
88 views

What to display in area where event-driven content should appear later

I asked a question here looking for design ideas for an alternative to the nested drop-down menus scheme I had come up with. User mikryz helpfully provided an alternative idea with this mockup: I'm ...
user avatar
0 votes
1 answer
77 views

How to determine if something is 1 row vs 3 rows in bootstrap? [closed]

In the following layout, how do I determine if each element should be in their own row and column or if all of them should be in 1 row and 1 column together, but separated by line breaks? Is there ...
user avatar
  • 103
3 votes
2 answers
3k views

What is this Google Apps popout menu called?

What is this menu called in UX/UI parlance? I want to implement this type of menu in my UI (ASP.NET MVC 5). My default styling is done with Bootstrap 3+.
user avatar
2 votes
2 answers
124 views

What is the best use of icons in the header? (icons replacing free text)

What is the best use of icons in the header? In my application I am using a number of icons for simple features such as "find friends". "ask a question" etc. This is mainly because I need to keep the ...
user avatar
  • 1,278
2 votes
2 answers
3k views

Bootstrap Glyphicons in Email

I am trying to prepare a custom email template. I have a table and I am currently using an image to show as the "X" as below: Since my first question was off topic, it put the question in my head as ...
user avatar
  • 33
0 votes
6 answers
447 views

How many mockups do you typically do for a responsive bootstrap design?

I am scoping a responsive project and thinking it will need views spanning from mobile to desktop. I am just wanting to confirm if it is necessary/helpful to do mockups for all 4 sizes (Extra small ...
user avatar
1 vote
1 answer
162 views

Do Users assume that company logos link to the "home" page? [duplicate]

I have limited space on the top navigation of my bootstrap website and among other links, I have both the company logo and home (index) link, Both logo and index scroll to the top of the page. I want ...
user avatar
  • 113
1 vote
3 answers
501 views

A User-Friendly Table - What Solution?

Today, this is my table and if I select one of the row, it shows a select icon. I want to make it more user-friend that you can see the whole row to be selected. Gmail has that functionality. In my ...
user avatar
  • 123
2 votes
3 answers
2k views

How do you choose between using a Jumbotron or Carousel?

I'm developing my first ever responsive website. This website will be a one-page website for one of my software products. I'm having a hard time trying to decide whether to use a jumbotron or a ...
user avatar
0 votes
2 answers
431 views

On Hover Styling for dropdown in top header

In my application, I've a selection drop-down in the main top-header menu. Now, I'm a little confused on how I should have on hover for that element. These are the two options: Option 1: No ...
user avatar
  • 185
3 votes
3 answers
19k views

Back button look bootstrap which one to use?

I have a multi page web app where the user first selects some information and uploads a file to import, then the file will be sent to the back end for processing. After that the results will be ...
user avatar
3 votes
5 answers
2k views

Best way to display a long form with many dynamic questions

So I need to make a form with about 10 different inputs in it. Normally, I would put this on a single page and have the user scroll down. This seems like the easiest way to do it most of the time. But ...
user avatar
  • 131
25 votes
3 answers
49k views

Comparison between Bootstrap and Material Design frameworks [closed]

The Bootstrap/Foundation family of design frameworks has been the main driving force behind a lot of responsive front-end web development projects. The Google Materials Design concept has also been ...
user avatar
  • 25.3k