Questions tagged [twitter-bootstrap]

Bootstrap is a front-end framework from Twitter designed to kick-start development of webapps and sites.

Filter by
Sorted by
Tagged with
2 votes
1 answer
1k views

Bootstrap form with floating labels

I have turned a "classic" Bootstrap form into a "floating labels" form. For this purpose, I had to move the labels below the form controls. ...
Razvan Zamfir's user avatar
5 votes
1 answer
3k views

Parking Lot Management System in JavaScript

Hypothesis There is a paid parking lot, with the following rates: $1 for the first hour and $0.5 for every subsequent hour. The parking capacity is of 10 spaces. Required Make an activity management ...
Razvan Zamfir's user avatar
2 votes
0 answers
82 views

CSS Content Flex

I would like to create a table where each column header contains a column name and a sort symbol. To do this, I'm using bootstrap. You can see my code below: ...
Xavier's user avatar
  • 21
1 vote
2 answers
396 views

Dynamic Accordion in WordPress

I used the Bootstrap v4.0.0 accordion to display my business services. Further, I created a custom post type "service" for my services (Each service is a post). To display my services ...
dicomp's user avatar
  • 41
3 votes
0 answers
44 views

Generating display elements with JavaScript

I've been writing a modular sandbox that has a web front end. Modules are discovered with reflection and could have parameters to them. When parameters are presented to the UI, I pass them through a ...
Hazel へいぜる's user avatar
5 votes
1 answer
117 views

Wordpress single post content class customization with if-else function

I have the following code, which displays the content for my custom page template "landingpage.php" and for single posts. The site uses Bootstrap 4. ...
Sniffles's user avatar
3 votes
1 answer
107 views

Master Doughnut Shop Website

I made my first website from scratch using HTML and CSS. It's a doughnut shop I did this as a way to practice what I have learned so far from an HTML and CSS course that I am taking. I would ...
PriscillaM's user avatar
2 votes
0 answers
19 views

Displaying workshops on a page

A section of my page lists 'Workshops' and just uses objects from a queryset. The page/site uses bootstrap. ...
Walid Mujahid وليد مجاهد's user avatar
2 votes
0 answers
103 views

Random Quote Machine with React and Bootstrap

For my first solo React exercise project I decided to recreate a quote machine from the example that uses vanilla JS/jQuery. I also used a mix of Bootstrap/plain CSS. I got it to look how I wanted and ...
Ogatron3000's user avatar
1 vote
0 answers
43 views

Generates HTML to show current Bootstrap screen size

When I am developing in Bootstrap, I need to make sure that what is on the screen looks good. Bootstrap have various cutoff points where the flow can change. So to help with the visual debugging, I ...
James A Mohler's user avatar
4 votes
0 answers
1k views

Bootstrap 4 Menu Collapse on Scroll

I am trying to code a menu that: Is horizontal on lg+ displays at the top of the page Shows a hamburger menu when the user scrolls from the top Will display as the collapsed format when the ...
Pete's user avatar
  • 141
2 votes
1 answer
116 views

Add or remove a class on two elements when two different events fire

I want to add/remove a class on the html and body tags in the dom when my nav menu is opened or closed. Is this the most optimal way of writing this logic? ...
Tanner Mann's user avatar
3 votes
0 answers
197 views

Dynamic Bootstrap 4 modal using JavaScript OOP

I have created dynamic Bootstrap 4 modal using JavaScript OOP. Please verify and give your reviews how I can improve the code. I have passed four parameters to create a dynamic modal: ...
user11657014's user avatar
1 vote
0 answers
32 views

Salary-structure report using a web-presentation

I had to create a report which presents the salary structure of a firm. The data needed was provided by the client as CSV-files. I used PHP for the reading and preprocessing of the data. The actual ...
michael.zech's user avatar
  • 4,294
1 vote
0 answers
21 views

Collapsible left-side tree

I was wondering if there is a better way to write the following code? The code is working, I am looking for better technique to achieve the functionality, if any exists. Never mind the classes that ...
NoChance's user avatar
  • 111
3 votes
1 answer
409 views

Display and search through a JSON's items in Vue.js

I have put together this small application which displays data from a JSON file known as "Users" in an HTML5 table. I use Bootstrap 3, Axios and Vue.js 2 for this purpose. Here is the code: ...
Razvan Zamfir's user avatar
2 votes
1 answer
284 views

My first ToDo list in JavaScript

I'm new to programming and in front-end. It's really hard for me to learn good practices. Right now I'm trying to learn javascript basics and bootstrap in addition. I did mine first ToDo list with ...
M.Taras's user avatar
  • 121
3 votes
1 answer
61 views

Note Tool - Fill text box with template

I've been working on a note tool for my company to help streamline verifying and noting accounts. I've added in extra features that help with different aspects of the job as well. I'm wondering if ...
Zach Wehrli's user avatar
2 votes
2 answers
83 views

Replace string of class of button by class so that only one button is filled in using bootstrap buttons

I'm using bootstrap buttons, and in this case I have 5 different buttons with 5 different classes. When one of the buttons is clicked on, I want it to be the only one filled in, and the others to only ...
user avatar
1 vote
1 answer
223 views

Vue.js Stoplight app - Dynamically changing classes on elements

I recently started delving into Vue.js, and decided to try my hand at some custom class/style bindings, so I made a small app that's supposed to cycle through each "light" of a stoplight (red, yellow, ...
Delfino's user avatar
  • 509
2 votes
1 answer
398 views

Unidirectional Bootstrap 3 carousel

I am working on a custom Bootstrap 3 carousel, with vertical, unidirectional, slide transitions. I want to prevent slide transitions from overlapping when the bullets are clicked in random order and ...
Razvan Zamfir's user avatar
3 votes
1 answer
281 views

CSS Grid and Bootstrap 4

First time posting in Code Review! I have started learning front-end development to complement my UI design skillset and am starting with CSS Grid and bootstrap. Have a look at the snippets. I think ...
Jordan Davies's user avatar
2 votes
0 answers
83 views

A simple "couple creator"

I just made this simple generator as a side-project to one big project I'm working on (demo on github pages here) and would like some opinions, feedback or suggestions on how to improve it. I hope you ...
Koby's user avatar
  • 61
2 votes
0 answers
6k views

Bootstrap 4 multi row navbar with big branding

I'm an asp.net web forms app using, for the first time, Bootstrap 4 as a responsive design framework. I've built a 2 row header navigation with big branding on the left, where the branding spans both ...
Jeremy's user avatar
  • 293
1 vote
1 answer
225 views

Simple landing page using Bootstrap

I have written a simple landing page in Twitter Bootstrap. It works fine, I just want to know if my code is written in a "good-practice" way. ...
Julian Lachniet's user avatar
11 votes
2 answers
18k views

Semantic markup for card blocks

I'm using Bootstrap. I'm doing my best to work with more semantic markup and getting away from divitis. Several of these "card" blocks appear on a page, like this. Original: ...
user avatar
5 votes
1 answer
974 views

Simple application for the game "Mad Lib"

It is an application for the game "Mad Lib". I decided to use bootstrap modal for the questions. Mad libs are a simple game where you create a story template with blanks for words. You, or another ...
Kate Herasimenak's user avatar
2 votes
1 answer
777 views

Bootstrap pagination

Here is my bootstrap pagination code. Maybe it can be simplified. ...
user avatar
5 votes
2 answers
193 views

HTML/bootstrap demo page

I've been coding for a while but I wouldn't really consider myself all that good at it. I recently started to learn bootstrap, and I really liked it and made a page to test it out. It has some basic ...
Joel Banks's user avatar
1 vote
0 answers
860 views

Nesting One or Multiple Forms in a Row

I have some simple HTML for a +/- Button, Phone Number Textbox, and a Phone Number Type Dropdown. I'm new to Bootstrap, so with the help of the tool Bootstrap Studio I generated this code that I ...
Ryan Taite's user avatar
1 vote
0 answers
1k views

Sass Collapsible sidebar in Bootstrap 4

I am creating a static site in HTML and CSS. I'm using Sass for the CSS. The whole repository can be found here on Bitbucket. I wanted feedback on the way I've done the sidebar. The code is split ...
J86's user avatar
  • 424
4 votes
1 answer
2k views

Build a quiz game with ReactJS

The task is to build a quiz game which has the following sections: Displaying a question Answer options Status of correct and incorrect answers so far Expected functionality: A question is ...
michael.zech's user avatar
  • 4,294
-2 votes
3 answers
147 views

Interview project to redesign a website for a property

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 ...
tyl-er's user avatar
  • 11
4 votes
1 answer
2k views

Step by step wizard

I'm currently working on creating a step by step wizard in Angular and twitter-bootstrap. I've actually got it to work as intended but as I'm looking to advance my skills I'd like to hear if you have ...
InfinityStream's user avatar
2 votes
1 answer
385 views

Time Card Web Application Offline

About & Purpose Purpose: As said by the title this is just a simple web application for use of a SINGLE user. It has the features of calculating total hours, clocking in, and clocking out. It ...
RepeaterCreeper's user avatar
1 vote
1 answer
414 views

Storing JWT in client side and putting tokens in all the future request

I have started using NodeJS with Express JS and PassportJS and JWT for User Authentication. I am able to authenticate the user and generate JWT Token. I am using Bootstrap for my front-end. By using ...
Rohith's user avatar
  • 71
3 votes
2 answers
283 views

Responsive buttons for post navigation

I have tried to make two buttons to be used for post navigation below each post on a blog: It works, however - it feels like to much code and classes for so little. I'm using Bootstrap 4, alpha 6. Is ...
Ole Kristian Losvik's user avatar
3 votes
0 answers
310 views

Ruby on Rails portfolio website

I've been learning Ruby on Rails for the last few weeks. I've decided to do a portfolio website using Ruby on Rails to showcase all of my projects. Can you look through my code to see what you think? ...
Sarah's user avatar
  • 401
4 votes
1 answer
7k views

Simple survey application with jQuery and Bootstrap

I needed to put together a small survey / test application which consisted of a bunch of radio inputs. I decided to give the standard radio button a visual overhaul and also rethink the visual ...
Mark Buskbjerg's user avatar
0 votes
1 answer
3k views

Optimizing add data from list to dynamic list using JQuery

I recently came across the need to be able to allow a user to select a value from a select list, and have it dynamically displayed in an unordered list and have the value disappear from the unordered ...
Chillie's user avatar
  • 289
1 vote
1 answer
113 views

Website for a historical society

Could you please tell me how I did on my first website? I designed it using Bootstrap v3.3.7 Here is the code from the index file. ...
Lord Rorek's user avatar
4 votes
1 answer
408 views

Bootstrap file input styler

This simple JavaScript code styles all file inputs to match with Bootstrap's style. Simply, it turns this: Into this input: ...
Ismael Miguel's user avatar
3 votes
0 answers
1k views

Flask site that uses x-editable to edit elements and update mysql db

This code is built in flask, it allows a user to edit a title and a description of a div. I have used the X-editable library which allows a user to edit text and use ajax requests. I also process ...
mp252's user avatar
  • 497
3 votes
0 answers
39 views

Responsive layout for showing/hiding 4 panels

I have 4 panels that will contains tables for data. There will be instances where a panel will contain no data, so I have combated wasted space with the code below. I'm relatively new to both jquery ...
Kramb's user avatar
  • 141
1 vote
1 answer
388 views

Create bootstrap toolbar

I have created a bootstrap toolbar(navbar) which is working. my question is, since this is my first time on this topic if there is a place for improvement ? we are using some mock to enter some dummy ...
John Jerrby's user avatar
1 vote
1 answer
102 views

Bootstrap responsive layout

I'm creating a responsive page with bootstrap. I tested my code with my browser (Firefox and Chrome) and it works. Is the code clean or is there a better way to code it? ...
Patrick85's user avatar
  • 491
3 votes
2 answers
10k views

PHP contact form using PHPMailer and Google Recaptcha

My company is designing a new site, and because I'm currently on bench I've been tasked with writing any PHP required. Pretty simple stuff, just a contact form and a resume upload page, both using a ...
alaskanloops's user avatar
3 votes
2 answers
116 views

Single page site with navigation bar

I've made a simple one page site to practise using Bootstrap. Could you please look at the HTML & CSS and check for possible improvements? Here's a page. HTML ...
kr099's user avatar
  • 151
3 votes
1 answer
3k views

Building a multi-panel display with React and Bootstrap

The exercise is part of a React course in which I'm currently enrolled. Description: The way it shall look on desktop-screen: How it shall look on mobile: Here's my solution: HTML ...
michael.zech's user avatar
  • 4,294
5 votes
1 answer
159 views

Single-page website

I learned HTML, CSS, JS, and Bootstrap then I grabbed a PSD and tried to code it from scratch (to get experience and something for my currently-non-existent portfolio). Here's the result. I need ...
Sam's user avatar
  • 159