Questions tagged [bootstrap]
questions about twitter's open source bootstrap framework
64
questions
2
votes
1answer
108 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 ...
-1
votes
1answer
40 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 ...
2
votes
3answers
314 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 ...
1
vote
1answer
87 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 ...
0
votes
1answer
73 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 ...
2
votes
2answers
463 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 ...
2
votes
2answers
109 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 ...
1
vote
1answer
91 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 ...
2
votes
2answers
178 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 ...
0
votes
1answer
175 views
Best way to organize search form interface?
I have tab in my application where users can search Accounts. Account table has two different type of accounts, User and Staff type. User type is one that have username, password, etc. Staff only ...
0
votes
2answers
149 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, ...
1
vote
2answers
328 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 ...
2
votes
2answers
204 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, ...
1
vote
1answer
56 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 ...
1
vote
1answer
80 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 ...
0
votes
1answer
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 ...
1
vote
1answer
605 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 ...
0
votes
1answer
146 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.
...
0
votes
3answers
119 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, ...
0
votes
1answer
107 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 ...
3
votes
1answer
128 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
...
1
vote
1answer
640 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 ...
0
votes
1answer
181 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:
...
6
votes
5answers
531 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 ...
0
votes
2answers
541 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 ...
2
votes
3answers
310 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 ...
1
vote
2answers
281 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 ...
0
votes
3answers
281 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 ...
3
votes
1answer
135 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 ...
0
votes
2answers
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 ...
1
vote
1answer
855 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 ...
1
vote
1answer
117 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 ...
2
votes
1answer
523 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 ...
0
votes
2answers
84 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 ...
0
votes
1answer
69 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 ...
3
votes
2answers
2k 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+.
1
vote
2answers
111 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 ...
2
votes
2answers
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 ...
0
votes
6answers
400 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 ...
0
votes
1answer
144 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 ...
1
vote
3answers
494 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 ...
2
votes
3answers
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 ...
0
votes
2answers
422 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 ...
3
votes
3answers
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 ...
3
votes
5answers
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 ...
25
votes
3answers
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 ...
0
votes
3answers
134 views
How should I display the areas where a user is having trouble
I am developing a website for a school project in which my fellow students can log in and prepare for upcoming exams. They are currently able to practice through flashcards and a memory game, and I ...
7
votes
5answers
5k views
Material Design for Web apps?
I'm working on an admin portal (angular, jquery, bootstrap..) and I'm pretty comfortable with bootstrap and I think that the bootstrap designs are pretty cool. Now, my colleague insists on changing it ...
1
vote
2answers
1k views
Web version of a complex business form
I have a seen some examples of bootstrap forms that actually look like a tax/complex printed document:
I seem to not be able to find it now and was curious if anyone can point me to an example or ...
6
votes
1answer
28k views
What is an average header height for mobile websites?
What is recommended/average header height for mobile websites.
Browsers such as Chrome and Safari have an address bar at the top which takes space so in terms of UX how big the header (eg bootstrap ...
