BootstrapSponsored by Jamf Now

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Share tech news, updates, or what's on your mind.

Sign up to Post

I am having a problem with a portion of my HTML not being responsive.  On a desktop, it looks fine - as pictured here:

and on a small screen, such as a phone, it looks like this:

My HTML - links specifically in the stepWrapper Div
<section class="ls ms section_padding_50">
  <div class="container">
    <div class="row">
        <div class="col-sm-12 text-center">
            <div id="stepWrapper" class="stepWrapper">
                <a id="link-manufacturer" href="/RapidRepair/Manufacturer" class="step ">Manufacturer</a>
                <a id="link-deviceModel" href="#" class="step current">Model</a>
                <a id="link-serviceProvider" href="#" class="step">Service Provider</a>
                <a id="link-repair" href="#" class="step">Repair</a>
                <a id="" href="" class="step">Add-Ons</a>
            <div class="topmargin_40">
                <h3 class="topmargin_20 ">What model needs repair?</h3>
                <ul class="rapid">
                    <!-- ko foreach: modelList() -->
                    <li><a href="#" data-bind="click:addDevice"><span data-bind="text:name"></span></a></li>
                    <!-- /ko -->

Open in new window

Here is the style for that Div

        .stepWrapper {
            text-align: center;


Open in new window

Cloud Class® Course: Python 3 Fundamentals
LVL 12
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

cardHi Experts,

I want to create lots of cards in a html page.  Please refer the attached sample card.  I want all Cards to be like this  I had tried the following below code to create the card but it is not working as expected.

<div class="card" style="width: 15rem;">		
	           <a href="pages/harriet-dally.html"> <img class="card-img"  src="images/thumbnail/HarrietDouglasDalyetal-PH0238-0383.jpg" style="border:0;"/>
			   <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
			      <p class="card-text"><strong>Harriet Daly</strong></p>

Open in new window

I tried to make opacity for the bottom div  on hover and on focus.  but not working.  please refer the attached image for reference I need card to be like this.

Please help me in creating this card

with many thanks,
Bharath AK
I have this

<span id="showSchedule" class="btn btn-default">Test</span>

Open in new window

I want to add a + before "test" --> so the button looks like + Test

This can't be that hard but drawing a blank.

I have built a new default bootstrap theme.  In my sandbox site, the responsive menu works perfect and can be clicked. (view hamburger menu in responsive mode, see link below)

I have the exact same theme.. unedited.. just copied and pasted in a new site.. but I cannot click the hamburger menu, see link below

This makes no sense, they are both bare bone websites using the exact same code
Please see here

and scroll down to "Example tab 2 (using standard nav-tabs)"

You see how I have a dropdown, and 2 input boxes. How can I align them? the dropdown is to the left. I want all 3 to be in the center.
i am going to start new project.

for that, i want to use some rich web template.

can you pls. suggest me to some sample of the template website which is been using Bootstrap, AngularJS and other Good UI template...?

I am new for Bootstrap..
Hi Experts

Could you point how to apply a Bootstrap datepicker on this specific case?

 <div class="form-group">
	<label for="nome">Data de Início</label>
	<input type="text" class="form-control" id="datainicio" name="datainicio" placeholder="Data de Início" value="<?php echo $Sessao::retornaValorFormulario('datainicio'); ?>" required>

Open in new window

Javascript (jQuery)

<script type="text/javascript" >
      var date_input=$('input[name="datainicio"]'); 
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,

<script type="text/javascript" src=""></script>
<link rel="stylesheet" href=""/>

Open in new window

The way above doesn't works out.

Thanks in advance!
Hi experts, I am using bootstrap 3
I have a page with 4 dropdown options and 4 number INPUT with different ids (see dropdown 1 below)
How can I add an eventlistener to either the dropdown or number input changes its value ?
What I am trying to accomplish is calculate the price on the fly (ajax and php)
P.S. I can calculate the price IF THE USER CLICKS A BUTTON, but I want to do the same calculations WITHOUT THE USER CLICK THE CALCULATE PRICE BUTTON

Tnx for any help or suggestions

    <div class="form-row">
     <div class="form-group col-sm-5">
        <label for="sel1" class="control-label">Select list :</label>
        <select class="input-large" id="sel1">
          <option value="399">Nativity Set - 399.00&#160;&#160; </option>
          <option value="189">Deer Set - 189.00&#160;&#160; </option>
          <option value="35">Sheep - 35.00&#160;&#160;</option>
          <option value="35">Cow - 35.00&#160;&#160;</option>
          <option value="35">Donkey - 35.00&#160;&#160;</option>
          <option value="35">Goat - 35.00&#160;&#160;</option>
     <div class="form-group">
      <label for="iQ1" class="col-sm-2 control-label">Quantity</label>
      <div class="col-sm-2">
        <input type="number" class="form-control" id="iQ1" value="1">    
Hi Exoerts

Could you point how to correctly positionate a paginator by using Bootstrap's "mobile first" feature?

The code I'm using:
 <div class="search col-xs-5 col-sm-8 col-md-8 col-xl-12">
	<?= $this->element('/paginacao') ?>

Open in new window

When using a large device it's well positionated:
But , when using a small device it isn't well positionated
Device features used:
Could you suggest what must to be changed (or added) to make it to be correct?

Thanks in advance!
Head out to and hover your mouse over either "Consultation Appointment" or "Bio-Consultation Appointment" at the bottom of the screen.

If you're looking at it from your desktop and your screen size is 1200px wide or more, you may notice that when you get the tooltip to display, the screen "jerks." I doesn't do that with smaller screen resolutions, but with the larger desktop screens it does and I don't know why.

That's dilemma #1.

The other dilemma is the tooltip itself. Because I'm activating it with a custom div, I want to position the tooltip a little higher than it's default distance from the top so you can see the arrow.

How do you customize the placement of the tooltip beyond "left, right, top or bottom." I've seen that code, but I'm having a hard time nailting down the way in which I can bring the position of the tooltip up about 10px.

What do you think?
Get expert help—faster!
LVL 12
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

I need to find a way to close a scrollable and absolute positioned lightbox popup when a person clicks anywhere outside of the lightbox:

( just click on the large header image up at the top to trigger the lightbox popup )

You'll notice that you can scroll this lightbox popup vertically, and that you can only close it by scrolling back up to the top and then clicking on the "X" in the upper righthand corner.  Ideally, I'd like to change this by doing either of the following:

1) Make is so that if you click anywhere outside of the lightbox to close it (this is the most preferred method)
2) Add a floating "X" button (that follows you as you scroll), that you can click on to close the lightbox (similar to that "Back to Top" button on the lower right of the page)

How would I accomplish either of these?

- Yvan
Dear experts:
Our need textbox with filter which include value and text search
<div id="multiple-datasets">
    <input class="typeahead" type="text">
Furthermore, when the user has focus on the textbox nothing will be displayed as user starts typing the filtered results will be displayed.

The current data looks like:
Value      Text
ABC             My Academy big company
DEF,GHI  Sample company with multiple associated values
XYZ             Zoombie

The ideal solution should use typeahead, bootstrap and jquery. The following link seems close to what is needed but it does not have a complete solution:

For example if I  click on the text box nothing is displayed as I type "a" then first two company Text show up. Notice that the value is hidden.
Note: We already tried a drop down with search (bootstrap select) but the issue we have is that we can not restrict the all descriptions display when the drop down have focus.

dear experts

I want to use svg icon on my web page
I use bootsrap4 css and below code like this.

<img class="icon icon-account-login" src="img/svg/account-login.svg">

my css file is like this, but I see the icon but the colour is black not #f00
how can I color the svg picture?

.icon-account-login {
  fill: #f00;
Hi Experts,

       I had created a web page.  For the webpage to be responsive, I had included media queries.  The page is okay in desktop but not in mobile views and tablet views.
Usually, I have to scroll horizontally to see the complete page in mobile and tablets view.  I think scrolling horizontally on mobile and tablet views are not correct.   I had seen sample responsive pages where the scrolling happens only vertically, we need not scroll horizontally for mobile and tablet pages.   I had attached the web page code as zip as well as pasted code for the html and css file.
<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Ez proxy</title>
    <div class="container-fluid">
	<div id="mybanner">	   
	<div id="box" class="row" style="Text-Align:center">		
	<div class="card border-success col-xs-11 col-sm-11 col-md-5 col-lg-3" style="width: 15rem;">
	   <p><span><strong>Access these resources at Northern Territory Library<br>No Login 

Open in new window

CSS not Working

Hi Guys. Im so confused why my css link is not working. i already tried to arrange my link style sheet but what happend is some off my custom css is not working.
For example have


background-color: pink;



background-color: white;
height: 800px;


Open in new window

This code. My background is working but when i adjust the height of class "div" nothing happens and remain at its previous size

here is my link
    [indent]<link rel="shortcut icon" href="/images/ojo.ico"/>
    <link href="" rel="stylesheet">
    <link href="" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src=""></script>
    <script src=""></script>
    <script src=""></script>[/indent]

Open in new window

Hi, I found a little issue with an input checkbox on its 'onchange' event when it's inside a bootstrap popup panel.

I've have the following

<label ><input type="checkbox" onchange="Changed(this)" > 

Open in new window

and a javascript function  that triggers when the user clicks on the label or the check box

  function Changed(element) {

Open in new window

This is all fine until the user holds the mouse for a bit (a couple of seconds) when clicking the checkbox. This makes the pop up to close but the event 'onchange' is not triggered.

Any ideas how to solve this?? Thanks!
I am referencing Bootstrap 3.3.7 and jQuery 3.3.1 and have attempted to provide the correct font size, etc. to correctly display the navbar items on a mobile device as well as my desktop.  However, when the screen size becomes small the dropdowns lose the shadow box and all perspective.

Need to understand where my css is not working as expected.   Also I should note that only the Monday  and Events itemized produce results.  All other items are there for example only.
I need to convert this image to CSS. Basically I need this same (or very close) look so I can manipulate the functionality ( as in, highlighting different circles depending upon what page they are on )

I am not having any luck,

The client is using bootstrap if that helps, with Jquery.

Thanks so much for looking at this.


The code executes just fine on my desktop browser, but the "Meetings" does not show on my mobile device so I am unable to click on anything.
Free Tool: IP Lookup
LVL 12
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

The code below displays rectangle shape and if the 'attribute.dflt' is equal to 1 then the rectangle shape is set to medium style.

<div class="section" style="padding-bottom:20px" ng-repeat="attrs in groupedAttributes track by $index">
	<h6 class="title-attr"><small>{{::attrs[0].attribute | uppercase}}</small></h6> 
        <ul style="list-style:none;padding:0;" ng-repeat="attribute in attrs track by $index">
	        <li style="cursor: pointer;display: inline-block;">
		          <div ng-click="updatePrice(attribute,$index)" ng-style="{ 'border-width':(attribute.dflt===1)?'medium':'thin' }" class="boxed">{{attribute.value}}</div>

Open in new window

Now if I have more than one rectangle as attached (rectangle.png) then I would like the style to shift from one rectangle to another. For instance, the following:

1) Rectangle [Red]
2) Rectangle [Orange]

Now rectangle red style is medium and rectangle orange style is thin. If I click on rectangle orange then rectangle orange style should switch to medium and rectangle red style switch  to thin. How can I achieve it with my present coding. Your help is kindly appreciated.

Thank You.
1. I bought this template
and I'm customizing it.

2. On the link above, click on the "hamburger" on top. You see how the side menu shrinks and the main content expands
3. In my site, the side menu shrinks but the main content doesn't expand

You can see it here:


Login with / Password321$

doesn't work
4. I checked the Chrome Developer's tool and I see the CSS tag being added

5. I also put debug step in the demo site (I have the code locally from Themefoest).. There's a function setSmallNavigation() but  I commented it out and the demo still worked.

I'm not sure what I'm missing.
How much re-sizing can you do with styles on things like tables, images, and other objects without interfering with their bootstrap properties.  In other words, if I want an image to be mobile responsive, can I re-size it with style="width:150px;" and still have it be a responsive image?
I have a jsp page using struts tag as below:
<html:form action="/actions/graphics/job/attachFile/confirm">
<html:cancel value="Cancel" styleClass="buttons"></html:cancel>
<html:submit value="Confirm"/>

Open in new window

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception
		ActionForward actionForward = SessionChecking.checkUserBean(mapping, request);
		if (actionForward != null)
			return actionForward;

		if (isCancelled(request))
                 //do something here

Open in new window

it works very well in production for years, now I am trying to change the looking of the button by integrating with bootstrap.
When I only changed the looking of button confirm, it looks like this:
confirm_button_only.pngat this moment, both buttons are functioning.

however, when I tried to change the looking of both buttons, it looks like this:
             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="submit" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>

Open in new window

they both looks good, but the problem is both buttons are doing the same job, which means they both have the CONFIRM function , no more CANCEL function.

then I tried a little modification for experiment:
             <html:form action="/actions/graphics/job/attachFile/confirm">
		<button type="button" id="cancel" name="cancel" class="btn btn-default" value="Cancel"  > Cancel</button>
		<button type = "submit" id="submit" class ="btn btn-primary" value="Confirm"> Confirm</button>

Open in new window

the problem for this code is the CANCEL button does NOT work at all regardless how many time I click on it.

can anybody help me on this? all I want is just make the CANCEL button looks as big as the CONFIRM button but keep the original functioning.
I think the real question would be : how to transfer the value of CANCEL button to the HttpServletRequest such that the function isCancelled(request) can return true?
by name="cancel" ?  value="Cancel" ? or type="cancel"?
On this page:  https://  www. magickitchen,com /landing/landing2.html (please remove spaces) , below the purple area with the orange circle animation, I am trying to get the icons and words to be properly spaced on all media. I feel I'm close, but it isn't working on desktop. Can someone help? Thanks.
I am using Bootstrap 4 and would like recommendations for a JQuery form validation plug-in. As well as the obvious client side validation including missing fields, pattern mismatch and min/max values, I also want the plug in to be able to make a client side call back for example to validate sign-in values.

I also need it to be HTML5 standards compliant and use the latest Bootstrap 4 classes to highlight fields in error or indicate success if need be.

I have managed to find the following validator which seems to fit the bill. Although it says it's for Bootstrap 3 I am sure it will work for 4 as well:

Any other alternatives would be appreciated.

BootstrapSponsored by Jamf Now

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Top Experts In