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

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
Cloud Class® Course: CompTIA Healthcare IT Tech
LVL 12
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

I need to pass params to the coldfusion cfc using Bootstrap table toolbar.

When I click the apply button I am serializing the form into array and now I need to split the variable. I have the code bu I get the  error message Uncaught SyntaxError: missing ) after argument list

$("#btnApply").click(function(){
		
			//alert($("#frm2").serialize());
			var vals  = $("#frm2").serializeArray();
			var str  = "";
			
			
			for (i=0; i<vals.length;i++){
   				str += '&' + $('#' + i.name) + '_title=' + $('#' + i.name').attr('title') + '&' + $('##' + i.name) + '_alt=' + $('##' + i.name').attr('alt');
			}
			 
			 alert(str);
			  
			$('#classes').bootstrapTable('refresh',{query: {str}});
			
			return false;
		})

Open in new window

0
Hi,

How to use and bind bootstrap date picker inside gridview textbox with formatted date.?

I have already used bootstrap datepicker in textbox in body section.

But, i want to use inside the gridview.

Can i have sample code for this...?
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
Hi,

I want to setup a development project using Bootstrap 4, so basically what I want to achieve is that I want to modify the actual .scss files provided by Bootstrap as per my requirement instead of creating my own scss file. I am using Netbeans 8.2 as the IDE for the same. As per Bootstrap we need to have Sass compiler and Autoprefixer to achieve the same. In Netbeans i setup the Sass compiler and i can compile the scss file to css. But I am unable to understand how to use the Autoprefixer to compile the css with vendor prefixes.

Also, instead of using the inbuilt webserver I have wampserver 3.1.3 installed on my windows 10 machine

Kindly help with the step by step to use Autoprefixer along with Sass compiler in Netbeans 8.2

Kindly let me know if any further information is required.

Thanks in advance.
0
The below code is not populating dropdown values

<div class="col-md-4">
  <div class="form-group">
    Usecase:
    <select id="select" formControlName="schedulerjobtype">
      <option *ngFor="let g of scheduleTypeList" [value]="g"> {{g}}
      </option>
    </select>
  </div>
</div>

Open in new window

But the below code is populating dropdown values

<div class="col-md-12">
  <div class="form-group">
    Usecase:
    <select id="select" formControlName="schedulerjobtype">
      <option *ngFor="let g of scheduleTypeList" [value]="g"> {{g}}
      </option>
    </select>
  </div>
</div>

Open in new window

When I increase the column width of the bootstrap grid from col-md-4 to col-md-12 (which is 3 cells to 1 cell) I am able to populate the drop-down. What would I do to populate the drop-down populated when the grid column width is 4?
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
Cloud Class® Course: C++ 11 Fundamentals
LVL 12
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

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
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
Cloud Class® Course: MCSA MCSE Windows Server 2012
LVL 12
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

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
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?  http://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=745&race_id=1306

Thank you!
0
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

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
>