Why code out the same thing for every project when I can do it once and reuse?
This version is reponsive, breakpoint at 980px
General container keeping content inside 980px, <div class="container"></div>
Basic flexbox design. Every row in it's own <div class="row"></div>
Child div classes range, using flex for sizing, col, col-2, col-3, col-4, i.e. <div class="col-2"></div>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem, iste. Non commodi illum ut similique doloribus quod adipisci corrupti nisi? At corporis maiores sit autem rem nihil molestias tenetur laboriosam!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem, iste. Non commodi illum ut similique doloribus quod adipisci corrupti nisi? At corporis maiores sit autem rem nihil molestias tenetur laboriosam!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem, iste. Non commodi illum ut similique doloribus quod adipisci corrupti nisi? At corporis maiores sit autem rem nihil molestias tenetur laboriosam!
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem, iste. Non commodi illum ut similique doloribus quod adipisci corrupti nisi? At corporis maiores sit autem rem nihil molestias tenetur laboriosam!
Works fine.
Non commodi illum ut similique doloribus quod adipisci corrupti nisi?
Non commodi illum ut similique doloribus quod adipisci corrupti nisi?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatem, iste. Non commodi illum ut similique doloribus quod adipisci corrupti nisi? At corporis maiores sit autem rem nihil molestias tenetur laboriosam!
The general button designs used in Coding Dojo wireframes.
Include the class btn on every button, it provides the general styling used on all buttons, like the border and box-shadow. Customize the button color, including hover effects, by adding another class, i.e. <div class="btn btn-teal"></div>
Make the button the full width of it's container by adding class w-100, i.e. <div class="btn btn-teal w-100"></div>