Inspiring

Answered

How can I float an image in an intro area?

13 replies
820 views
Translate

I am new to bootstrap and am doing my brothers website for him.

He wants a special offer image in the area whete the Welcome message is but it needs to float up when the page scrolls.

I have tried to put the star to the side but this completely covers the whole page instead of floating left or right as I try to do.

Instead I have temporarily put it above on the page but this is not where I want it.

I hope I am not flouting any rules by putting the website address up here ( http:\\www.tanyalak.com )but you need to know what I have achieved and what I want to achieve.

I want to put the yellow stars to each side of the text.

Thank you in advance.

Terry

This topic is closed to new replies. Start a new post to keep the conversation going.

T

terryfosterCorrect answer

Inspiring

Thank you for all your feedback everyone.

I had an instruction to remove the attempt I made by my Brother and the idea has been simplified to a single line of text.

Probably someone else will be taking over :-(

T

terryfosterAuthorCorrect answer

Inspiring

Thank you for all your feedback everyone.

I had an instruction to remove the attempt I made by my Brother and the idea has been simplified to a single line of text.

Probably someone else will be taking over :-(

Translate

O

osgood_

Legend

terryfoster wrote
Probably someone else will be taking over :-(

That's brotherly love for you. You should never attempt to produce anything for close family and friends. I once tried to produce a website for my sister many moons ago and that all ended in tears

Translate

Nancy OShea

Community Expert

To float elements in Bootstrap 4, use the float-left or float-right classes. In earlier versions of Bootstrap, it was pull-left or pull-right.

You can also target viewports. For example, to float an element on large viewports, use

<div class="float-lg-right">Element Here</div>

https://getbootstrap.com/docs/4.0/utilities/float/

Translate

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

https://forums.adobe.com/people/Nancy+OShea wrote
To float elements in Bootstrap 4, use the float-left or float-right classes. In earlier versions of Bootstrap, it was pull-left or pull-right.
You can also target viewports. For example, to float an element on large viewports, use
<div class="float-lg-right">Element Here</div>
https://getbootstrap.com/docs/4.0/utilities/float/

No Bootstrap being used in the content area the OP mentions.

Translate

Nancy OShea

Community Expert

Looks like it has been pulled down. Boootstrap was mentioned in the OP's first sentence.

Translate

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

You could use the below css to place a star either side of the text....

<style>

.intro-content {

display: flex;

flex-direction: row;

}

.star {

background-color: yellow;

width: 10%;

}

</style>

<h2>Welcome to Tanyalak</h2>

<h3>Thai street food restaurant</h3>

<h3>Tanyalak<br>

35 George Street, Hull HU1 3BA</h3>

<h3>email: admin@xxxxxxx.xxx</h3>

</div>

</div>

</section>

Translate

T

terryfosterAuthor

Inspiring

Just been told to remove it - Not on the site anymore.

Translate

O

osgood_

Legend

terryfoster wrote
Just been told to remove it - Not on the site anymore.

Been told to remove what?

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.