locked
Links with bootstrap right place RRS feed

  • Question

  • User-2094959909 posted

    hello everyone,
    i have this code html of 4 <a> that are horizental in the middle
    of page and i want them to be in the right (float right) verticaly
    and in the rest of the page i want to show a div with some text
    and all will be responsive so that if resize the screen to small
    screen of phone or tablets the links should go under the div with text
    and normal links because my code shows big square links
    can anyone help ??

    <div>
    <a href="#" class="btn btn-sq-lg btn-warning"><i class="fade fa-user fa-5x"></i><br />Delete or<br />Update<br />User</a>
    <a href="#" class="btn btn-sq-lg btn-danger"><i class="fade fa-user fa-10x"></i><br />Add<br />User</a>
    <a href="#" class="btn btn-sq-lg btn-success"><i class="fade fa-user fa-5x"></i><br />Delete or<br />Update<br />Operation</a>
    <a href="#" class="btn btn-sq-lg btn-primary"><i class="fade fa-user fa-10x"></i><br />Add<br />Operation</a>
    </div>

    thanks in advance.

    Monday, July 23, 2018 12:08 PM

All replies

  • User475983607 posted

    Omar, set aside time to learn bootstrap.

    https://getbootstrap.com/docs/4.0/getting-started/introduction/

    I think you need containers and the grid system.  Start at the link below.

    https://getbootstrap.com/docs/4.0/layout/overview/

    If you need further assistance then we'll need to see the current layout design and expected results.  The code shown is not enough to provide accurate assistance.

    Monday, July 23, 2018 12:53 PM
  • User-2094959909 posted

    home phone

    home laptop

    Monday, July 23, 2018 3:13 PM
  • User283571144 posted

    Hi Omar27,

    Accoridng to your description, I suggest you could use bootstrap’s listgroup component and its flex utility to help you.

    More details, you could refer to below codes:

        <!--In the div with class  tab-content ,you could put your div with text  in it.
        In the div with the class list-group , you could put your links , the list-group class will help you  arrange your links well.
    
        There are several classes for responsive effects.
    
        The  col-sm-10 class makes the content occupy 10 grids for screen wider than 576px to spare space for your links.
    
        The w-100 class make a new line and the d-sm-none class makes it doesn’t work when the screen is wider than 576px.
    
        The  flex-row class make the links in a horizontal order. If you don’t want  horizontal order ,just remove it.
    
        The  flex-sm-column class makes links be in a vertical order when the screen is wider than 576px.
    
        The  flex-fill  class makes the links fill the whole row.-->
    
        <div class="row">
    
            <div class="col-12 border border-primary  col-sm-10 ">
                This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured
                content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
            </div>
    
            <div class="w-100 d-sm-none"></div>
            <div class="col-12 col-sm-2  flex-row list-group flex-sm-column">
    
                <a href="#" class="btn btn-sq-sm btn-warning flex-fill  "><i class="fade fa-user fa-5x"></i><br />Delete or<br />Update<br />User</a>
                <a href="#" class="btn btn-sq-sm btn-danger  flex-fill "><i class="fade fa-user fa-10x"></i><br />Add<br />User</a>
                <a href="#" class="btn btn-sq-sm btn-success flex-fill"><i class="fade fa-user fa-6x"></i><br />Delete or<br />Update<br />Operation</a>
                <a href="#" class="btn btn-sq-sm btn-primary  flex-fill"><i class="fade fa-user fa-10x"></i><br />Add<br />Operation</a>
    
    
    
    
            </div>
    
        </div>
    
    

    Related link:

    https://getbootstrap.com/docs/4.1/layout/grid/ for col class.
    https://getbootstrap.com/docs/4.1/components/list-group/ for listgroup.
    https://getbootstrap.com/docs/4.1/utilities/flex/ for flex.
    https://getbootstrap.com/docs/4.1/getting-started/introduction/ for basic reference.

    Result:

    Best Regards,

    Brando

    Tuesday, July 24, 2018 6:48 AM