Bootstrap

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 have what appears to be a download issue with IE and multiple applications developed as an .HTA where the library files for bootstrap and jquery will not download.  This does not happen every time.  There will be a delay as long as 20 minutes and then I will get the download dialog in IE  "The file couldn't be downloaded." or a script error in the HTA files showing the cdn link.  This just started a few days ago and the HTA files have been working for months with no problems.  Is there a way to trace where the delay is at or what might be causing it?  I have cleared cache several times.  When the HTA does come up if I use control + F5 then everything works as normal.  This in on windows 7 machine.  I have tried clearing all the content in the HTA file with the exception of the script src and css cdn references and it still occurs.  I have also tried different cdn sites and no change.  I don't know if I can force the HTA to use the cached version of the files instead of downloading each time or if that is even the issue.
0
Introducing Cloud Class® training courses
LVL 12
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

We have a site that has some js that opens/closes panels in a bootstrap theme.   We want to be able to add to the script to post if the panel is opened or closed so that if the user comes back, it will be open or closed like it was when they were there last.

This is the code that is called in an external .js file.

jQuery(document).on('click', '.panel .tools .fa-chevron-down', function () {
        var el = jQuery(this).parents(".panel").children(".panel-body");
        if (jQuery(this).hasClass("fa-chevron-down")) {
            jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            el.slideUp(200);
        } else {
            jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            el.slideDown(200);
        }
    });

Open in new window


This is the html that is calling it

<div class="col-lg-6 column draggable" id="panel_id_1" data-column="#panel_id_1_col#" data-row="#panel_id_1_row#">

                      <section class="panel">
                          <header class="panel-heading panel-homes">
                              MY NOTIFICATIONS SINCE LAST LOGON					

                              <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down chevwhite"></a>
                            </span>
                          </header>
</section>
</div>

Open in new window


I know I need to add an update to it (I think!) and pass the id variable - id: $(this).attr("id") and some sort of post but I have no idea where to put it, etc to call my script (that I have already written.    Can i get some guidance on where to add this new information to the current script?
0
Hello everyone,

I have a firebase database and a html website which I am using to post news related articles and I would like to be able to have the ability to post new articles to firebase and have them populate on the website automatically. The website is only on a CPanel server and is not being generated using a Linux platform.

I also use bootstrap to format the pages and would like the pages to maintain formatting. Any suggestions are appreciated :)
0
I am using jQuery UI & bootstrap Modals in my website. As both modals have different styling, so I want to change the styling of jQuery Ui Modals
according to the Bootstrap Modals. I have tried to change the styling in jQuery UI css but it not works. What is the best way to do this?

Any Working example?
0
I've two following tabs where tab's respective data is paginated. The pagination works OK when I am in the first tab. But when I goto second tab and try to paginate, it takes me to the first tab.

Can you please help me with this, how can I stay in the selected tab while I am going through the pages of that particular tab?

PHP:

<?php
    $first = [];
    for ($i = 1; $i <=25; $i++)
    {
        $first[] = $i;
    }

    $second = [];
    for ($j = 11; $j <=35; $j++)
    {
        $second[] = $j;
    }

function paginate($data)
{
    $totalrows = count($data);
    $perpage = 10;

    $totalpages = ceil($totalrows / $perpage); // total number of pages

    if ($totalpages < 1)
    {
        $totalpages = 1;
    }

    $page = 1;
    if (isset($_GET['page']))
    {
        $page = (int)$_GET['page'];
    }

    if ($page < 1)
    {
        $page = 1;
    }
    elseif ($page > $totalpages)
    {
        $page = $totalpages; // set page to totalpages page number
    }

    $offset = ($page - 1) * $perpage;

    if ($offset < 0)
    {
        $offset = 0;
    }

    $items = array_slice($data, $offset, $perpage);

    $pagination = "";

    if ($totalpages != 1)
    {
        $pagination .= '<ul class="pagination">';
        // first and previous link
        if ($page > 1)
        {
            $previous = $page - 1;
            $pagination .= '<li class="page-item"><a class="page-link" href="' . …
0
I have the page that show a table and in one of the table cell I show a progress bar implemented in bootstrap. When the page is shown in HTML it works fine . When I convert the page into PDF the progress bars disappears
0
Screen grab - search screenHi All,

I am working on updating a web app that keeps track of a large number of phone number assignments (among other things), I am trying to update the UI so that it doesn't look like it was done in the 90's so I am using bootstrap and jQuery.

I need the end users to be able to search/filter the results from each column, see attached for a redacted likeness for the look/feel I am going with. I didn't want to use separate search buttons to submit the forms, instead I was thinking of having the user just enter the filter terms into the text box and it either updates live or (preferably) updates the view if they press enter.

At the moment I have the screen being generated and the unfiltered results from the database shown in the main view. I have no real idea how to go about using jquery to submit using multiple search fields (or even 1 search field for that matter). So I will need some help pointing me in the right direction and, if you can, some examples.
0
Need some help with a boostrap grid.

On mobile it should be stacked vertically
______
|_A_|
| B  |
|___|
|_C_|

But on desktop I'm try to split them into 2 separate columns with B being on the left side and A + C stacked vertically on the right.
___________
|       |  A  |
|  B  |____|
|       |  C  |
|____|____|

So far I can only get A+C on top of B or below B but I can't seem to split them up.
0
In bootstrap 4 using a modal dialog there is a problem with the close after clicking cancel or save.  The form has a search input that refreshes the values in each input on the modal.  If this is used and updates the form then it requires to click the cancel or the save button twice to close.  There is also a shift at the bottom of the modal and a gap of white space is added on the first click.  The cancel button uses data-dismiss="modal".  Is there something that is occurring when the search refreshes the values across the entire form that I may not be doing correctly?  Basically on the search click event I simply add the values by using $("#input1").val('new value').
0
I have created the following page which is responsive.

<div class="container-fluid" id="#test">

	<div class="row"> 
		<div class="col-md-3">
			<div ng-include src="'assets/templates/theme/sidemenu.php'"></div>
		</div>
		<!--
		<div class="table-responsive">
			<ul class="list-group text-center">
				<li class="col-xs-6 col-md-3 col-sm-3 col-lg-3 list-group-item" ng-repeat="product in products">
					<figure>
						<img width="50px" height="50px" ng-src="{{backend_url}}{{product.thumbnail[0].path}}" />
						<figcaption>
							{{product.name}} <h3>{{product.price.cost_price | currency}}</h3>
						</figcaption>
					</figure>
					<input class="btn btn-success" type="button" ng-click="addItemToCart(product,1)" value="BUY" />
				</li>
			</ul>
		</div>
		-->
		<!--
		<div class="col-md-9">
			<div class="row">
				<div class="col-sm-6 col-md-3">
					<h1>{{ subcategory }}</h1>
				</div>
			</div>
		</div>
		-->
		<div class="col-md-9">
			<p class="subHeader" ng-show="isSubHeader">
			{{subcategory | uppercase }}
			</p>
		</div>
		
		<div class="col-md-9">
			<div class="row">
				<div ng-if="products.length===0">
					<p>{{msgProduct}}</p>
				</div>
				<!--  
				col-lg-2 col-md-4 col-xs-6				
				col-sm-6 col-md-3  
				-->
				<div class="col-md-3 col-sm-6 col-xs-6 text-center" ng-repeat="product in products track by $index">
				  <div class="thumbnail">
					<div class="card-img">
					
						<div class="discount" ng-if="product.price.cost_price != 

Open in new window

0
Get your problem seen by more experts
LVL 12
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Using Yii2 with a modal Bootstrap and the dosamigos TinyMce will only work on the first call.  I have looked all over the net for the solution and found plenty of people with the issue and they explain that it needs to be initialized.  I have tried and tried, but can't seem to get it to work in my case.  As it stands right now, I can finally get the tinymce to appear in subsequent calls, but the content flash for a second and then the control goes blank and I can't work with it.

My index.php view file  is

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\helpers\ArrayHelper;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\bootstrap\Modal; //used to make create a popup window
use backend\models\Projects;
/* @var $this yii\web\View */
/* @var $searchModel backend\models\TicketsSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Tickets');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="tickets-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?php // = Html::a(Yii::t('app', 'Create Tickets'), ['create'], ['class' => 'btn btn-success']) ?>
        <?= Html::button('<i class="glyphicon glyphicon-plus"></i> '.Yii::t('app', 'New Ticket'), 
            [
                'id'=>'modalCreateButton',
                'class' => 'btn btn-success modalButton',
                

Open in new window

0
I had created asection with multiple columns. Now, I wish to start a new row, so I created a new container as well. But when I run the file, the new row is not added. Instead, another column is being made. Can anyone help me in debugging this code.

How can I make the data appear in a new row below the previous one? Any help will be apreciated! Thanks in advance!

0
I want to add a css templete to my angular 4 project to give good look and feel.

Please give me complete steps, how to add my free css templete with my angular 4 project.
0
Greeting World, I am trying to create a -Navbar toggle button using bootstrap. The code below is not working for some reason, can anyone give me some advice on what's wrong with my code? Thanks!


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">
<title>The Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<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 = "css/tether.min.css" />
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<link rel = "stylesheet" href = "css/lasosa.css" >
</head>

<body>

<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">

    <button class="navbar-toggler-right" type="button" data-toggle="collapse"
     aria-controls="navbarSupportedContent" data-target="#navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">        


      <span class = "navbar-toggler-icon"></span>
      </button>

      <a href="#">The Andy A Bobien</a>


      <div class="collapse navbar-collapse" id="#navbarSupportedContent">

        <ul class="navbar-nav mr-auto">


            <li class = "nav-item">
            <a href ="#" class = "nav-link">About Me</a>
            </li>

            <li class = "nav-item">
     …
0
hi
i need to include bootstrap.js file to my custom theme created on magento2 website
how to to do it? i tried adding in default_head_block.xml i am getting as jquery is no defined, i need bootstrap js to load across the website
0
Need to have an asp.net form that uses bootstrap as well...newbie to asp.net, if code or samples could be provided would be appreciated.

Thanks
0
I am using an already existing html layout so that I can focus on learning wordpress development. I can create a basic menu but creating a dropdown menu seems to be really difficult.

In my functions.php I have registered my main navigation:

register_nav_menus( [
	'main-menu' => esc_html__( 'Main Menu', 'My Main Menu' ),
] );

Open in new window


And in my wp-admin area I have created the structure with dropdown (sub item)

On the front end, the main menu is displaying correctly but I cannot get the dropdown part to work at all.

Here is the non-wordpress version:

     
    <div class="nav-container">
            <div>
                <div class="bar bar--sm visible-xs">
                    <div class="container">
                        <div class="row">
                            <div class="col-3 col-md-2">
                                <a href="index.html"> <img class="logo logo-dark" alt="logo" src="img/logo-dark.png"> <img class="logo logo-light" alt="logo" src="img/logo-light.png"> </a>
                            </div>
                            <div class="col-9 col-md-10 text-right">
                                <a href="#" class="hamburger-toggle" data-toggle-class="#menu1;hidden-xs hidden-sm"> <i class="icon icon--sm stack-interface stack-menu"></i> </a>
                            </div>
                        </div>
                    </div>
                </div>
                <nav id="menu1" class="bar bar-1 hidden-xs">
             

Open in new window

0
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!
0
This is a follow up question of
https://www.experts-exchange.com/questions/29087446/Jquery-based-responsive-date-picker.html

The typical example only shows the date range with no icons:
https://uxsolutions.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=bottom+auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on&toggleActive=on#sandbox
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
0
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.

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.

Dorinda
0
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>
    </asp:PlaceHolder>
		
    <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" />
</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference 

Open in new window

0
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": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/ngx-toastr/toastr.css",
        "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
        "styles.css"
      ],

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.
0
seeing weird characters from webresponse for bootstrap contents. results expected as this image expected.png, but all i see is below image
result.png
0
I saved my images into bytes in project B to show it in project A.
I did this to try to get the image from the particular id to show, problem is 1.image does not show , 2.it only shows image from EImage01Byte and i need to show the image from EImage0Byte when i click next
<div class="carousel-inner" role="listbox">
      <asp:Repeater ID="rptrImages" runat="server">
          <ItemTemplate>
    <div class="item <%# GetActiveClass(Container.ItemIndex) %>">
       <img src="<%#Eval("EID") %>/<%# "data:image;base64," + Convert.ToBase64String((byte[]) Eval("EImage01Byte")) %>"></img>
  </div>  
              </ItemTemplate>
          </asp:Repeater>
  </div>

Open in new window

Then i did this. Now, all the images in EImage01Byte regardless of the id, so thats a problem, also i need the second image
 <div class="carousel-inner" role="listbox">
      <asp:Repeater ID="rptrImages" runat="server">
          <ItemTemplate>
    <div class="item <%# GetActiveClass(Container.ItemIndex) %>">
       <img src="<%# "data:image;base64," + Convert.ToBase64String((byte[]) Eval("EImage01Byte")) %>"></img>
    </div>  
              </ItemTemplate>
          </asp:Repeater>
  </div>

Open in new window

my code behind is like this !!
 BllCompEventCatalog eve = new BllCompEventCatalog();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindEventImages();
            }
        }
        private void BindEventImages()
        {
            Int64 EID = Convert.ToInt64(Request.QueryString["EID"]);
            DataTable ds = eve.getEventAll();
            rptrImages.DataSource = ds;
            rptrImages.DataBind();
        }
        protected string GetActiveClass(int ItemIndex)
        {
            if (ItemIndex == 0)
            {
                return "active";
            }
            else
            {
                return "";
            }
        }

Open in new window

0
ttip.docxHi All:

I had a really simple question. How do you combine options and tooltip to have this effect as you see in modern travel portal. I have included a document displaying a above mentioned effect. A small example would be really helpful. I guess it is a combination of option and tooltip.

Look forward to your responses.

Best Regards,

Sunnybrad
0

Bootstrap

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
Bootstrap
<
Monthly
>