Bootstrap Shorthand Responsive Classes

By -
At times I needed to completely change sections of the bootstrap template to fit my needs and page design. I learnt more about bootstrap classes and how to use them appropriately to adjust margins and padding. Some of these classes were already being used in the Bootstrap template, however I did not understand their purpose.

When researching further I discovered that the classes were shorthand for built in CSS. 

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Therefore as an example, using the class 'ml-1' equates to margin left (ml) with the spacer variable multiplied by 0.25.



There was also similar shorthand classes for the display properties where by d-none d-block (display: block) displayed the element for extra small screen sizes only. Without a breakpoint Bootstrap automatically assumes that the breakpoint is for xl screens however, if this breakpoint was added e.g. d-none d-xl-block this element would only be displayed for extra large screen sizes.

Notation:

d-{value} for xs
d-{breakpoint}-{value} for sm, md, lg, and xl.

These classes allowed me to hide particular elements, which I used specifically for when the website needed to be responsive for mobile. When the page width is reduced in size to mobile, the header body image disappears from view, leaving the logo and header copy. This was achieve using the in-built display classes.


BOOTSTRAP. (n.d.). Bootstrap Display property. [Online] Available at: https://getbootstrap.com/docs/4.0/utilities/display/
BOOTSTRAP. (n.d.). Spacing. [Online] Available at: https://getbootstrap.com/docs/4.0/utilities/spacing/

Popular posts from this blog

Handmaids Tale Experimentation

By -
Image
As this is a ballet adaptation, I thought perhaps I could use ballet shoes as a motif. I'm going to try to avoid making this look cliché. If this doesn't work, I may play around with the additional photograph that Dean provided us with. I purchased a pair of used old pointe shoes on a reselling app named, 'Depop' and once arrived asked my boyfriend to hold the ribbons of the ballet shoes in different positions. At first I noticed that the natural lighting was extremely dark and dull. Being a complete amateur at photography, logically I needed another light source so decided to use a smartphone camera flashlight to provide this.  We tried the lighting from different angles until we had the flashlight almost face-on to the ballet shoes. This reminded me of being in front of a spotlight at the theatre and created some amazing natural shadows. I thought the introduction of the male hand/arm was synonymous with the controlling men in the Handmaid's Tale.  The main theme ...
Read more

Platform Considerations

By -
Image
During today's introductory lecture, we briefly touched on the Degree Project assignment which got me thinking more in-depth about my final major project. While on placement, there was a large amount of discussion among my peers about our return to University. Hearing other student's ideas resulted in me starting my own thought process into which type of platform or device(s) I wanted to focus on creating for.  Originally, I was considering building an app which would include user research, prototyping and a coded creation. Although this would be an interesting project, this isn't an area I have much knowledge about. I have previous experience creating app mock-ups using myBalsamiq and prototypes using Invision however I have never coded an app before let alone published one. This gap of knowledge may hinder the development of the application and result in an incomplete project. Therefore I'm leaning towards a web design and development project instead. As I have alread...
Read more

Showreel

By -
Image
Using Adobe Premiere Pro, I cut both visual and audio elements together to suit the length of the showreel. As the video shouldn't be anymore than a minute, I decided to keep to this timeframe. This was  actually helpful as it forced me to keep projects that looked impressive or I was most proud of. I've happy with my showreel as I feel that there isn't any filler and I managed to add quite a lot of movement considering some of my work are stills/print based. After completing my showreel, I uploaded this to YouTube where I featured this on my channel. This means that my showreel will be the fist video that potential subscribers/employers will see. I decided to use a song named, Shelter by Porter Robinson & Madeon. With permission from Dean, we were allowed to use a published song or soundtrack. I liked this song in particular because it was upbeat and I thought it sounded as though at intervals that the song repeated 'wonderful' which is how I would like my work...
Read more