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

Micro Front End Development and Fun

Writing Elegant Code with Clean Code

Designing APIs (RAML) In Anypoint Platform

Boss Arriving Part-3: Health & Final Wave- Game Dev Series 54

CSS Media Queries: The magic behind responsive web design

SOFTWARE LICENSING

AWS INFRASTRUCTURE AS CODE v2(CLOUD COMPUTING)

Test Engineers Who Know The Answers

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

My first days using Linux

All HTML5 Tags with their descriptions/Uses and examples

Quick Way to Deploy a Website

How to use a browser’s elements tab