Skip to main content
Inspiring
September 10, 2018
Answered

How can I float an image in an intro area?

  • September 10, 2018
  • 4 replies
  • 772 views

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 has been closed for replies.
    Correct answer terryfoster

    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 :-(

    4 replies

    terryfosterAuthorCorrect answer
    Inspiring
    September 10, 2018

    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 :-(

    Legend
    September 10, 2018

    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

    Nancy OShea
    Community Expert
    Community Expert
    September 10, 2018

    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/

    Nancy O'Shea— Product User & Community Expert
    Legend
    September 10, 2018

    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.

    Nancy OShea
    Community Expert
    Community Expert
    September 10, 2018

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

    Nancy O'Shea— Product User & Community Expert
    Legend
    September 10, 2018

    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>

    <section id="intro">

    <div class="intro-content">

    <div class="star">Star</div>

      

    <div class="intro-content-text">

    <h2>Welcome to Tanyalak</h2>

    <h3>Thai street food restaurant</h3>

    <h3>Tanyalak<br>

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

    <h2>01482 322201</h2>

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

    </div>

    <div class="star">Star</div>

    </div>

    <!--Intro-content-->

    </section>

    <!-- /section intro -->

    Inspiring
    September 10, 2018

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

    Legend
    September 10, 2018

    terryfoster  wrote

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

    Been told to remove what?