Week #9 : BOOTSTRAP

*Review: 

Student pages: https://ryansmithart.com/FALL2025/students.html

- tigerweb.towson.edu

- Responsive Web Design (W3) 

---

- What are SVG files? 

- How to make a square image a circle 

 
<style>
.circular{border-radius:50%;}
</style>
<img class="circular" src="chakras/Third-Eye-Chakra-1.jpg" width="100" height="100" alt="chakra">

BOOTSTRAP
getBootStrap.com

---

Beginners Guide (video)
youtube.com/watch?v=WpzT-pTImyo

Bootstrap Grid (video)
youtube.com/watch?v=ceNe37KIjPY (12 columns)

getbootstrap.com/docs/5.1/examples/jumbotron/

getbootstrap.com/docs/5.1/examples/carousel/

---

MORE LINKS:

Dropdown Menu (W3)

Dropdown Images (W3)

Responsive Navbar with Dropdown (W3)

The Container Class (W3)

- First Try... (rS)

* Download: try1.zip

---

blindTextGenerator.com/Lorem-Ipsum

---

- Try #2 with Bootstrap/carousel

*Download: carousel.zip


class="img-fluid mx-auto"
/* added CSS style: */
.navbar{
background-color:teal;
}

https://www.pexels.com/search/space/


/* added CSS style: */
.overlay-image{
position:absolute;
bottom:0;
left:0;
right:0;
top:0;
background-position: center;
background-size:cover;
opacity:1;
}

---

<div class="carousel-item active">
<!--
<svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false"><rect width="100%" height="100%" fill="#777"/></svg>
-->
<!-- image size: 1000 x 500px -->
<div class="overlay-image" style="background-image:url(bg1.jpg);"></div>

<div class="container">
<div class="carousel-caption text-start">
<h1>Slide #1</h1>
<p>Some representative placeholder content for the first slide of the carousel.</p>
<p>Blah Blah Blah </p>
</div>
</div>
</div> <!-- end slide #1 -->

---

HOMEWORK:

* Keep working on Project #2

---