logo
Tags down

shadow

Text on Left, Icon on Right - Bootstrap


By : user2175309
Date : October 15 2020, 08:10 PM
like below fixes the issue You can use float: right to make your image stick to the right, and set the text-align: left so the text will start at the left end.
Example here
code :
align-left {
  text-align: left;
}

.push-right {
  float: right;
}
<div class="container">
  <div class="row">
    <button class="btn btn-lg btn-success col-xs-12 align-left"> Call Us <span class="glyphicon glyphicon-earphone push-right"></span></button>
  </div>
</div>


Share : facebook icon twitter icon

Bootstrap button: left icon and centered text


By : Anvil
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I need to generate a button (not a group of buttons) with the following structure: , Use a simple button, with .pull-left on your glyphe :
code :
<button class="btn btn-lg btn-success col-xs-12">
    <span class="glyphicon glyphicon-earphone pull-left"></span> Call Us
</button>

Left alignment of text and icon in bootstrap button with custom image


By : KING Silent
Date : March 29 2020, 07:55 AM
this will help text-align: left css property can affect inline and inline-block elements and you can use it for left alignment.
EDIT:
code :
.btn-group .btn-default {
    text-align: left;
}
<div class="btn-group btn-group-justified custom-btn-group">
     // content goes here...
</div>
.custom-btn-group .btn-default {
    // styles goes here...
}
.btn-group .btn-default {
  text-align: left;
}

.btn-group .btn-default span,
.btn-group .btn-default img {
  vertical-align: middle;
  display: inline-block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group btn-group-justified">
    <a href="#" class="btn btn-default" id="bCheckIn" value="action01">
        <img src="http://localhost/daycare/assets/img/activities/CheckIn.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Check in</span>
    </a>

    <a href="#" class="btn btn-default" id="bactivities" value="action02" >
        <img src="http://localhost/daycare/assets/img/activities/Activities.png" width="35" height="35"/>
       <span class="hidden-xs hidden-sm">Activities</span>
    </a>

    <a href="#" class="btn btn-default" id="bBottle" value="action03">
        <img src="http://localhost/daycare/assets/img/activities/Bottle.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Bottle</span>
    </a>

    <a href="#" class="btn btn-default" id="bComputer" value="action04">
        <img src="http://localhost/daycare/assets/img/activities/ComputerTime.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Computer</span>
    </a>

    <a href="#" class="btn btn-default" id="bDiaper" value="action05">
        <img src="http://localhost/daycare/assets/img/activities/Diaper.png" width="35" height="35"/>
        <span class="hidden-xs hidden-sm">Diaper</span>
    </a>
</div>

Bootstrap v4 uncollapsible icon to the left of the bootstrap hamburger icon


By : Shane
Date : March 29 2020, 07:55 AM
this will help One way to solve this is to position your phone icon after the navbar-brand (and before the toggler) in the HTML and then add the classes d-block d-lg-none ml-auto mr-3 to it.
d-block will show it by default i.e. from the smallest screen size on. d-lg-none will hide it for screens that are large (lg) and up. ml-auto (margin-left:auto) will push it to the right. And mr-3 is "margin-right 3 units" to give it a bit of spacing.
code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>

    <ul class="navbar-nav d-block d-lg-none ml-auto mr-3">
        <li class="nav-item">
            <a class="nav-link" href="tel:+1234567890"><i class="fa fa-mobile"></i></a>
        </li>
    </ul>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
        </ul>
    </div>
</nav>

Bootstrap - Pull Icon to Left of Text


By : LAM THI
Date : March 29 2020, 07:55 AM
will be helpful for those in need you can try this
jsFiddle Demo

Adding a phone and map icon to the left of the bootstrap hamburger icon


By : Tsutomu Okumura
Date : March 29 2020, 07:55 AM
like below fixes the issue I have a basic bootstrap v3 website. When the navbar switches to the hamburger icon on smaller screens, I would like to add a Phone Icon (linking to a phone number) and a Map Icon (linking to google maps) so mobile users can easily access them. I tried adding a phone icon to the left of the hamburger, by adding the code just before the .navbar-toggle button, but I can't figure out how to make it responsive like to hamburger icon. I can position it, but that doesn't keep it responsive. , How to add uncollapsible icons to the Bootstrap Navbar
Related Posts Related Posts :
  • Overflow: content on left side is hiding on overflow is set to auto
  • Loop over Observable
  • Laravel controller doesn´t process my view parameters
  • put margin on border - css
  • Form table inputs doesn't get aligned in HTML
  • Using flex to achieve two rows and one column layout
  • How to make <textarea> take the size of text
  • Make nested table with table-layout auto, width 100% overflow when window too small
  • Fully cover one div with another div of the same size
  • 16bit canvas with WebGL 1
  • "Elements should not have tabindex greater than zero" - Nonzero Tabindex Breaks Validation & 508 Complianc
  • Dynamic form using *ngFor and submitting values from it
  • Why does Firefox not use CSS from an local absolute path?
  • Bootstrap 4 Card Component Remove unnecessary whitespace
  • Link takes double click to activate- how to make it only one? Angular 5
  • How to center a DIV in the remaining space on RHS of another DIV
  • Yii2 Remove container div specific to every record from listview
  • Charm bar doesn't scroll to bottom
  • Sticky footer is hiding content at the bottom of my website
  • Why I am getting GET vars in a POST form?
  • How do I make the "after" pseudo-element always be on the same line in my table headers?
  • Bootstrap 4 Order div columns
  • Auto-width image with `srcset` attribute
  • How to make the image also have rounded corners?
  • Scrape table for nested table in local html using selenium
  • Fixed side chat menu using flex box
  • Select all siblings if one of them has a specific class
  • HLS / Media Source Extensions <video> with muted & autoplay freezes on first frame on mobiles
  • HTML element doesnt contain all page contents
  • XPath to find elements
  • Target only the first direct child not working despite :nth-child(1)
  • Why nuxt insert all css link into every page with extractCss true
  • User agent stylesheet is overriding my css even though it acknowledges it shouldn't?
  • Basic tags in html clarification
  • CSS Lifted Corners in Foundation 6
  • How to make CSS clip path only reside on top of div?
  • Allow page breaks inside tr and td elements
  • Creating a dropdown menu purely with HTML + CSS
  • How to add vertical space between inputs in a form?
  • Submit button does not pass form data
  • Why a row is stacked in column
  • Button style differs on different screens and devices
  • Grid is not flexible enough to sort the posts
  • CSS — How to blur a SVG mask?
  • Disable the growing ability of an element
  • Line up text over multiple lines under each other?
  • CSS3 Grid fill space in last row
  • Convert six column flex layout into three columns
  • ngModel with select list
  • Spring boot Requested mapping value variable
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org