On this page
Float images to the left or right in Bartik
Drupal 7 will no longer be supported after January 5, 2025. Learn more and find resources for Drupal 7 sites
Once you have created a subtheme of Bartik, you may float images to the right or left in nodes by adding the following CSS:
Float images to the right
In your subtheme.css file, add the following CSS to the bottom of the page:
/* ----------------- Image fields ----------------- */
.node .field-type-image {
float: right; /* LTR */
margin: 0.5em 0 1em 1em; /* LTR */
}
.node .field-type-image img {
display: block;
padding: 0 0 10px 0;
}
.node .field-type-image.field-label-above {
margin-top: 0;
}
.node .field-type-image .field-label {
margin-bottom: 0.5em;
}
.node .field-type-image.field-label-inline .field-label {
margin-bottom: 0;
line-height: 1;
}
And, in your subtheme's style-rtl.css file, add the following CSS to the bottom of the page:
/* ----------------- Image fields ----------------- */
.node .field-type-image {
float: left;
margin: 0.5em 1em 1em 0;
}
Float images to the left
In your subtheme.css file, add the following CSS to the bottom of the page:
/* ----------------- Image fields ----------------- */
.node .field-type-image {
float: left; /* LTR */
margin: 0.5em 0 1em 1em; /* LTR */
}
.node .field-type-image img {
display: block;
padding: 0 0 10px 0;
}
.node .field-type-image.field-label-above {
margin-top: 0;
}
.node .field-type-image .field-label {
margin-bottom: 0.5em;
}
.node .field-type-image.field-label-inline .field-label {
margin-bottom: 0;
line-height: 1;
}
And, in your subtheme's style-rtl.css file, add the following CSS to the bottom of the page:
/* ----------------- Image fields ----------------- */
.node .field-type-image {
float: right;
margin: 0.5em 1em 1em 0;
}
Read more about the reasoning behind this code, which has been submitted by Jeff Burnz, and plans to upgrade float tools in Drupal 8 core at the following thread: Float images in Bartik articles.
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion