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 working on a project using aspdotnetstorefront 9.4. It has been a number of years since I have used the product and in the past it was mostly fronted development. What I need help with is that currently there is a login menu link and it should take you to a signin page. What we are currently trying to implement is using bootstrap 4, upon clicking the login menu link in a hidden div or dialog box there would be a login form that would allow you to sign-in to the site. I have already been able to implement the form with bootstrap on the visual side, but I am not sure how to code the form so that when you login the form actually works and logs you in.

Any help or code is most appreciated!
Free Tool: SSL Checker
LVL 12
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Hi, I am trying to create a "Database" or "blog" to simply add 'comments' or 'posts' from users, but I don't want to create a database. I would prefer using something like xml, php or similar. I am using html with bootstrap. I just want the user to post a comment, and I will save it to a specified file. The information to be written and retrieved from that file would be : date, username, and comment.

I would like to save it , and retrieve it for displaying purposes only (kind of a blog)

I already have a page that sends those user comment to my EMAIL, so I have the input fields already

Tnx for any help and I am open to your suggestions on how to accomplish this task
I have some javascript that expands a table row on click, the row expands fine and if I select  a row above the row I have just expanded, that expands too. However, if I select a row below the an expanded row, it does does expand slightly but not with the content that appears in the rows above. (hope this makes sense.

What I would like to do is to close all expanded rows before it opens the one selected  so that there can only be one expanded row expanded at a time, but not sure how to do this. I assume i would have to do this wth a class. Am new to javascript, so I may be missing something obvious.

Thanks in advance

Code below;

                     // ROW EXPANDER CONSTRUCT =================================================================
                                var $table = $('#testTable');

                                $table.on('', function(e, index, row, $detail) {
                                var res = $("#desc" + index).html();

                                $table.on("", function(e, row, $tr) {
                                // Get selected row
                                var tbl = document.getElementById("testTable");
                                if (tbl != null) {
                                for (var i =

Open in new window

Php-Captcha-Form-Demo this is my registration page, here I am generating captcha in modal , and registering i written code to insert data into insert.php written action for the form in Php-Captcha-Form-Demo.php ,but here it is  not redirecting to page and not inserting data .
 so please help to insert data into db table.
This is a follow up question of

The typical example only shows the date range with no icons:
My current requirements are:
 - Responsive (must work Real Ipad and mobile galaxy)
 - When day is selected the date picker must close.
 - When picker is shown, it must open down the picker location.
 - Date range must work with icons and have similar behaviour as per current sample link.
 - It supports IE11 onwards, Chrome (latest and previous 3 releases) and Safari.
 - It supports Iphone 7 and up and Galaxy S5 and up.

 We are currently using Bootstrap latest 3.x version and Jquery 1.12.x
I have a table that if I attach the bootstrap table options makes the table searchable.
<table data-pagination="true" data-search="true" data-toggle="table">

Open in new window

However, once I add rows to the table dynamically (via javascript) the new content loads fine in the table and is formatted as required, but the search option does not work as the table does not seem to be recognising that the new rows have been added. Indeed, if I use the search, it still searches what were the same records that existed in the table before the new rows were added. It's almost as if the table needs to be refreshed.

I have tried removing the options in the table tag that provide the search etc and dynamically applying them with javascript after the rows have been added.

Open in new window

The console log indicates that the attribute changes have been applied, but the table does not offer the functions.

Having now spent hours experimenting, I am out of ideas, so would be really grateful if someone could shine a light on what might be going wrong?
Can someone tell me why, when viewed landscape on a mobile device (iPhone in particular), this page has the ads over the top of part of the results but when viewed portrait (or on a pc) it does not?

Thank you!
How do I control the column widths in a table on a page that uses bootstrap?
I am working on a site that i am trying to keep self contain to one page with bootstrap using carousels and modals.  I have  to create 4 photo galleries on the site and allow each of the galleries to function in a modal with a lightbox/carousel inside them.  I have tried all of the solutions I can find online and nothing seems to work or only works partially.  I really need some helps as I have a deadline fast approaching and am still learning this stuff.

I am happy to provide code if needed but if any one can point me to a solution that will work I would be thrilled.  I will be hosting this solution in Azure as well.

Thank you in advance.

My boostrap menu is not functioning properly for mobile. Below is my site.Master page. On a desktop the default page displays properly and when I shrink the window, I get the hamburger and the submenu items. When i open the site on a mobile device:
  1. The menu is still displaying as it would on a desktop (no hambuger)
[list=2]When I click/press the Services link/button, nothing happens.[/list]

What am I missing / doing wrong?

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %>- My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <asp:PlaceHolder runat="server">
        <script src="<%: ResolveUrl("~/Scripts/modernizr-2.6.2.js") %>"></script>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-submenu.css" rel="stylesheet" />
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
    <form runat="server">
        <asp:ScriptManager runat="server">
                <asp:ScriptReference Name="jquery" />

Open in new window

Keep up with what's happening at Experts Exchange!
LVL 12
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

How can I get these two images in Bootstrap to not start stacking on top of one another until the browser size makes it necessary?

Here's a screenshot:

screenshot of webpage header
Notice how the image on the right is sliding down? The width of these two images is such where they should be directly opposite one another and I don't understand why they are not.

What do I have to change to ensure these images remain parallel to one another right up until the point where they are butting up against one another? At that point, I would want them to stack directly on top of one another and I've got that covered with the "col-xs-12" dynamic. But what am I missing or what can I include to make sure the two images remain directly opposite one another until that point?

Here's my code:

<div class="container-fluid" style="overflow:hidden;">
			<div class="row-fluid">
				<div class="col-md-6 col-sm-6 col-xs-12" id="header_wwol" style="margin-top:20px;">
					<img src="images/wwol_logo_xs_transparent_09-16-2014.fw.png" class="image-responsive pull-left">
				<div class="col-md-6 col-sm-6 col-xs-12" id="header_aha">
					<img class="img-responsive pull-right" alt="Applied Health Analytics" style="margin-top:30px;" src="images/AHALogo300x39.fw.png">
			<div class="row">
				<div class="col-xs-12">&nbsp;<br></div>
			<div class="row-fluid">
				<div class="col-xs-12" class ="header_div" 

Open in new window


I want to create a web page with bootstrap with following layout (image attached). Can you please help me with some sample code how to achieve this layout with ASP.NET MVC/Bootstrap.

Basically there will be top three section and two split pane in that page.

 vertical split pane with two sections.

I recently updated to jQuery 3.1.1 and started getting
"Error: Syntax error, unrecognized expression: #" on my dropdowns. It seems there are issues with jQuery and bootstrap 3. It was noted that this was fixed by updating to Bootstrap 4.0.0. I seem to still be getting this error. Is there anything i can do here or am i just stuck using an old version on jQuery?

Thank you
I am using standard bootstrap CSS Grid Layout. I have a section template I am trying to figure out.

Here is what a section looks like:

This is what the page currently looks like.
And this is the code that generates this middle section of this image.

    <div class="col-lg-12 box_main text-center">
            <div class="box2">
                <h3 class="section-heading">Day 4. Peace Over Worry</h3>
                <div class="border_box1"></div>
                <blockquote class="mb10 ">
                    <p class="justify text-faded-light">
                    	<img src="../img/talent/steve-douglass.jpg" /><br />
                    	Steve Douglass<br />
                    	<p>Do you worry? You’re not alone — nearly everybody does. It’s natural to be concerned about what is happening 
around us and in our own personal lives. But if we’re not careful, we can step over the line from concern into worry. Someone once 
said, “Worrying doesn’t take away tomorrow’s troubles, it takes away today’s peace.” Isn’t that the truth!                     </p>

Open in new window

What I am looking for is how the html should be laid out so that it looks more like this:

How I want the text to be laid out.
So how would the "divs" need to be laid out so that this looks good on all screens.  Here are a couple of things I want to be true.

  • I want it to look good on both narrow and wide screens.
  • I want this section box to always be centered in the page.
  • I would like the pictures to be all set to a similar size if possible. (
  • (without having to physically resize them all)
  • The name caption under the picture should be centered.
  • How do I create indenting without using blocktext.

I don't spend a lot of time in complex layout (I'm more the conceptualizer and data manager). So I am hoping that somebody that lives in the html layout and design world can figure this out much more quickly.  Thanks.

If you want to view the whole Web page in the test environment, you can  do so here:
I have upgraded my application from Angular 4 to Angular 5. After the upgrade the glyphicon icons are not showing up

<span class="glyphicon glyphicon-user" style="cursor:pointer"></span>

Open in new window

In the browser console, this error is displayed

Glyphicon error
I continue to use the same version of bootstap v3.3.7 and it is also included in angular-cli.json (no changes here as well)

"styles": [

Open in new window

Is there something else that needs to be done in order to make the icons work? Other bootstrap styling is working fine.
Some HTML5 / Bootstap web pages started getting very dark background and unreadable reported by customers. On Samsung Tablets using chrome browser.  

Multiple Samsung tablet users reported this problem starting. I don't believe it is a change on our end as they pages have not been changed. They work fine on Samsung Note 8 which I have. I don't have Samsung tablet to test. The pages are fine with  all browsers for desktop and other devices as far as I know.

Please help me understand and fix how I can adjust the html / css to fix this. Or is a plugin misbehaving? I am not sure. Sorry I am not super-technical but know enough.

Here are two examples of the pages getting the dark backround on Samsung tablets
Why won't the list on this page render as such?
If you look at the image, there are shared web pages between the 3 applications, Web, Mobile and Touch Browser. I need to report the web pages uniquely per application. So if web page A is loaded, it will need to load different JS libraries for each type of application. Currently a JS bootstrap loader file handles the logic to load the proper JS libraries but that is a 1-to-1 relationship. I now need a way to determine which application is loading the web page and load the appropriate libraries (DTM libraries but irrelevant). The solution would have to reside in the JS bootstrap loader file logic. I’m looking into using the navigator object to sniff out which type of application is requesting the web page but not sure how feasible that is? Maybe feature detection is another way but not sure how/if this would work with the applications? Any ideas?

Web Page/Application Distribution
Hello, I have decided to build a website with Bootstrap 4, just to test it out.

I am having trouble with as simple a task as centering an image, though.

This is the full code:

<!doctype html>
<html class="no-js" lang="it">


    <!-- BOOTSTRAP 4 -->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="js/vendor/jquery-3.2.1.min.js"></script>
    <script src="js/vendor/popper.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>



        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="text-center logo">
                        <img class="img-fluid" src="img/logo/logo800.png">



Open in new window

And this is the test page on my server:

I haven't been able to find a single reason why this image shouldn't be centered, with the text-center class assigned to its containing div.

Can somebody help me understand this?
Hire Technology Freelancers with Gigs
LVL 12
Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Dear Experts,
I'd like to use 3 steps Navigation bar. I'm new with bootstrap.

I have the below code for 2 steps nav bar. But I need 3 steps. Thank you

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <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>

  <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 class="nav-item">
        <a class="nav-link" href="#">Link</a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>

Open in new window

How do we have a completely clean DEV environment to write an application in Node / Angular / Bootstrap / ...? I am having trouble with CLI's and updates each time. Does anyone have a real Best Practice? I would like to take an environment that I have been hacking around in and clean it up, ready for a new project easily.  Ideally, I would love to see a script to run that will clean it all up in one shot.
We have a page on a Bootstrap site which features a menu on the left.  Currently the menu is fixed in that it scrolls up and off the screen as the user scrolls down the page.  We want the menu to instead "float" and stay visible as the user scrolls up and down the page.

I got codes below:

<div class="form-group form-group-sm">
                                <label for="Alternative Date Time">Hire Date:: <span class="compalsory">*</span></label>
                                <div class="input-group date" id="hiredate">
                                    <input type="text" class="form-control" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>

Open in new window

This has generated the following output:

As you can see the "Calendar" icon is not aligned with the text field.

How can I changed the codes so that both are aligned properly? Thank you.
How can I get my image and getFile on the same row? I must be missing something...


<form class="center-block form-horizontal">
  <div class="form-group row">
    <label class="col-sm-12 col-md-2 col-form-label" for="getFile">Image:</label>
    <div class="col-sm-12 col-md-10">
      <a href="#image">
        <img class="thumbnail" src="">
      <input class="form-control input-lg" id="getFile" style="width:80%; display:inline; float:right;" type="file">

Open in new window

I am trying to create a button-type nav bar on my classic asp pages that expands when it is clicked.  I am only getting a small "object" that, when clicked, does expand and show the links but does not have the formatting it should.  Any help would be much appreciated.  I can't post the page because it is login-based but here is some info (the rest of the bootstrap in the site works fine:

Nav contents:
			<nav class="navbar navbar-inverse">
  				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span>
        					<span class="icon-bar"></span> 
    				<div class="collapse navbar-collapse" id="myNavbar">
      					<ul class="nav navbar-nav">
							<li>List Items here</li>

Open in new window

<!DOCTYPE html>
<html lang="en">

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="GENERATOR" Content="Microsoft Visual Studio 6.0">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="alternate" href="" hreflang="en-us" />
<link rel="shortcut icon" href="/assets/images/g-transparent2-351x345.png" type="image/x-icon">
<link rel="stylesheet" 

Open in new window



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