Stack Exchange Network

Stack Exchange network consists of 174 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [bootstrap]

questions about twitter's open source bootstrap framework

2
votes
2answers
64 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
104 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
0answers
20 views

Add/edit panel that slides up from button

I need to display a pretty simple data entry/edit form, two fields and a save button. I don't like the idea of using a modal dialog as it appears in the middle of the screen, far removed from the ...
0
votes
2answers
78 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, ...
0
votes
0answers
50 views

Accordion - parent url functionality

Which method provides for a better UX with a bootstrap accordion menu? 1) The parent 1 menu item’s href becomes active once the accordion is open. parent 1 (header) child 1 child 2 2) Copy parent 1 ...
0
votes
0answers
72 views

Best button placement given existing layout

this is my first time asking about UX. My intention is for the layout to be as intuitive as possible for the user regarding button layout. I've got this page developed and I'm not sure about what ...
1
vote
2answers
257 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
154 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
89 views

Interview project to redesign a website for a property [closed]

I'm applying for a UI/UX position at a company that makes software for landlords, apartments, property managers, etc. After the interview the hiring manager gave me a project to work on. These are the ...
1
vote
1answer
47 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
74 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
49 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
348 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
144 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
108 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
95 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
121 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
460 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
89 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: ...
7
votes
5answers
401 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
385 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
206 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
217 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
103 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 ...
4
votes
1answer
127 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
4k 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
625 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
104 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 ...
3
votes
1answer
371 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
77 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
67 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
945 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
105 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
2k 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
337 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
138 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
443 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
381 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 ...
2
votes
3answers
17k 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 ...
24
votes
3answers
46k 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
111 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 ...
6
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 ...
5
votes
1answer
20k 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 ...
0
votes
1answer
1k views

What's a great looking responsive multiselect solution?

I have Q/A section on my Rails 4 site and questions can be tagged with one or many tags. I'm looking for a cool multiselect that I can use for adding tags that will also work on mobile devices. I'm ...
1
vote
2answers
401 views

Creative Methods to Allow Users to Select Chart Series

This is a very generic question, but I have a graph that will be plotting attendance data for the public schools in my district. The users would like to see this data grouped by district, High Schools,...
2
votes
2answers
202 views

What does a user expect when they zoom on a website?

My idea of zooming in on a web page is that everything becomes bigger. Everything is still the same but just bigger. This is because I feel it should be like zooming on a camera or telescope (where I ...
0
votes
2answers
673 views

Where should I put an Add button in a Bootstrap Modal dialog?

I have a UI like this designed at the moment with Bootstrap modal: I was thinking the "Add Shift" button looks misplaced. Would there be any better placement for the button so it doesn't look so out ...