Style LabArchives Widgets with Bootstrap and CSS

Bootstrap

Demonstration of responsive widget based on window width

CSS Styling

@media (max-width: 576px) {
.xsTableDiv {
width: 300px !important;
overflow-x: scroll;
}
}
Screenshot showing the aligned inputs by using the fullWidth class

Using Bootstrap to Design Form

//Add classes to add bootstrap styles for left column in form
$('.myLeftCol').addClass("col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 text-right");

--

--

--

PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science. gibsonamanda.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Antivirus evasion techniques in .NET

14 language features in TypeScript and Dart you may miss in Java

C# Comments

Which technologies and roles could earn more?

VerneMQ — A scalable alternative to Mosquitto for MQTT Messages

Screenshot of our Graphana Dashboard reflecting the major metrics tracked for VerneMQ broker

Wow Visitors with High Performance Websites

Beginner’s Guide to Emby

Some AGILE terms you should know about

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amanda G. Gibson

Amanda G. Gibson

PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science. gibsonamanda.com

More from Medium

How To Host Fonts And Icons Locally With Webpack

Bootstrap 5 — Adding it to your page

BigBasket clone using pure HTML, CSS & JS

Bonjour tech-nerd !!

JS