Bootstrap 4 : Building Projects

Create a responsive Bootstrap 4 navbar for an event site, featuring brand, links, collapse toggle, and alignment options, with home, contacts, login, and register items.

Add a search area to the navbar by implementing an inline form with a text input and placeholder, and center the form using text-center to adapt across screen sizes.

Design a home page slide by adding an image to the image/slide folder. Paste the CDN script into the index page and edit it before the closing body tag.

Build a bootstrap 4 image slider with captions by adding a caption div, caption subtitle, and paragraph text. Duplicate slides and apply button classes to run and test the project.

Create a project title page by building sections and headings in Bootstrap 4, using display-4 and center alignment, and refine heading sizes with small tag styling and content structure.

Learn to style text in Bootstrap 4 using text utilities, captions, and image classes, including alt attributes, figure captions, and responsive, rounded or circular images.

Duplicate a div to create three categories in a Bootstrap 4 project, update images and names (concert, fayer category, football), and apply a green tag style for the home page.

Learn Emmet HTML shortcuts in Adobe Brackets to speed Bootstrap projects by using tab expansions to create divs, classes, lists, and inputs, with dollar sign numbering for multiple items.

Master Emmet CSS shortcuts in Adobe Brackets to speed up CSS writing, create a new CSS file, and apply background colors, URLs, positioning, and margin shorthands.

Create a responsive section displaying the last three blog posts with cards, images, titles, and excerpts, and add SEO-friendly tags for better search visibility.

Design the Bootstrap 4 footer by listing categories as clickable links with anchor tags, styling links, and adding necessary classes.

Create a responsive events list page in Bootstrap 4 using a jumbotron, container, and headings, with links and optional background image for a polished layout.

Build a responsive navigation bar in Bootstrap 4 using collapse and a toggler button. Include a brand, nav items, and a search form with an active state for events.

List all events on the page using bootstrap 4 cards, headings, subtitles, and a responsive image deck, showcasing event names like the mantle festival in Amsterdam.

Create a paginated events list with Bootstrap 4, using a navigation of page links and list items, including area labels and hidden parameters to manage state and navigation.

Learn to build a Bootstrap 4 details page, part 1, by cloning the footer and navigation from the evangelist page, and composing a container section with headings and dividers.

Continue the detailed bootstrap 4 page design by adding alerts with a dismissable close button and accessible area labels. Display event details: date, location, and price.

Add two event sections: a video area with a YouTube iframe and a map area with a Google Maps iframe, then copy, paste, autoplay, and adjust styles for layout.

Develop the details page in Bootstrap 4 by adding a comments area, implementing the media object with media-left and media-body, resizing images, and styling with circle images and hashtag links.

Learn to construct a details page with a forum group form using Bootstrap 4 classes like form-group, form-control, textarea, label, and a submit button; verify the page works.