Image
Images can be made responsive using the .img-fluid class, so that their widths never exceed their parent elements' widths.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
<div class="row">
<div class="col-6">
<!-- Responsive image -->
<img src="..." class="img-fluid" alt="responsive image">
</div>
</div>Rounded images #
Images can be rounded using the following utility classes:
- The .rounded class creates images with rounded corners.
- The .rounded-circle class creates fully circular images, provided that the actual images are square in shape.
- The .rounded-top class creates images with rounded corners only on the top, while the .rounded-bottom class creates images with rounded corners only on the bottom.
- The .rounded-left class creates images with rounded corners only on the left, while the .rounded-right class creates images with rounded corners only on the right.
<!-- Rounded image -->
<img src="..." class="img-fluid rounded" alt="rounded image">
<!-- Circle image -->
<img src="..." class="img-fluid rounded-circle" alt="rounded circle image">
<!-- Rounded top image -->
<img src="..." class="img-fluid rounded-top" alt="rounded top image">
<!-- Rounded bottom image -->
<img src="..." class="img-fluid rounded-bottom" alt="rounded bottom image">
<!-- Rounded left image -->
<img src="..." class="img-fluid rounded-left" alt="rounded left image">
<!-- Rounded right image -->
<img src="..." class="img-fluid rounded-right" alt="rounded right image">Alignment #
Images can be aligned using utility classes on the parent element. For example:
- The .text-center class aligns the image to the center.
- The .text-right class aligns the image to the right.
<!-- Aligned to center -->
<div class="text-center">
<img src="..." class="img-fluid rounded" alt="...">
</div><!-- Aligned to right -->
<div class="text-right">
<img src="..." class="img-fluid rounded" alt="...">
</div>
Up next:
Links
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
