Bootstrap

1K

Solutions

4

Content

i
The collection of articles, videos, and posts on this topic.

833

Contributors

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 a little inexperienced with console error messages.  How can I resolve "You have 3 errors on your page  uncaught SyntaxError: Unexpected token '<'" on this page: https://www.gopherstateevents.com/results/cc_rslts/relay_rslts.asp?meet_id=637&race_id=3175

Thank you!
1
2 Comments
CompTIA Network+
LVL 19
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Learn More!
Can someone explain why the "Display By" list on https://www.gopherstateevents.com/results/cc_rslts/relay_rslts.asp?race_id=3040&display_by=school is not displaying horizontally please?

Thanks!
0
1 Comment
I have an HTML5 bootstrap website that has a video as the background on the home page.

The problem is if that I maximize the screen the video remains smaller. It's not responsive.
How can I make it responsive so that the video gets bigger if the screen gets bigger (I know the quality may be impacted but I am OK with that)

Here is my current code:

<video autoplay="autoplay" muted="muted" loop="loop">
<source src="https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4" type="video/mp4">
</video>

Open in new window


I am just using a sample video from the template.
Also, can we modify the code so that it uses a vimeo video instead?
0
5 Comments
Is it possible to load the image files in my image folder and create a multiple items carousels with jquery or bootstrap ? Any example or reference,

Is there any recommended image size or ratio for the image showing as the banner of the webpage ?

Thx
0
1 Comment
How to add few spacing between the image and the paragraph text ?

Thxtest.phpImage.png
0
2 Comments
Using a form in-line class this scenario has two columns of label text inputs.  There are a few that have added input-group-appends with font awesome calendar or search icons.  For whatever reason those are shorter than the others.  Below is an example with two columns also original has six rows.  Also they are centered.  I could make the labels right justified by using justify-content-end but not the inputs.  It would be nice to left justify these because the gap between the label and the input would be smaller.

<form class="form-inline">
<div class="form-group row">
<label class="col-3 col-form-label justify-content-end">First Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
<label class="col-3 col-form-label justify-content-end">Last Name:</label>
<div class="input-group col-3" class="form-control">
<input type="text" class"form-control">
<div class="input-group-append">
<span class="input-group-text"><i class="fa fa-search"></i></span>
</div>
</div>
</div>
</form>

Open in new window
0
5 Comments
In Bootstrap 4, how to put sign up and login reference on Bootstrap right hand side of the navigation bar ? The code below doesn't show up icon, it only show the Sin Up and Login text. Any idea ? Thx


<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">
    <img src="home1.png" alt="logo" style="width:40px;">
  </a>

  <form class="form-inline" action="<?php echo $_SERVER['PHP_SELF'] ?>">
    <input class="form-control mr-sm-2" type="text" placeholder="All" name="search">
    <button class="btn btn-success" type="submit" name="submit">Search</button>
  </form>
 
 
<ul class="nav navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
      </li>
    </ul>
</nav>
0
1 Comment
I'm new to Laravel so forgive me if this question borders on something that should be painfully obvious...

I've downloaded a very impressive Bootstrap template for my Admin Suite.

It has a great number of features that I don't know if I'm going to need, but before I discard them completely, I wanted to make sure I wasn't overlooking something.

While the aesthetics are awesome, the functionality seems to be something that would have to come from a database of some kind. But there's nothing mentioned in the description and, I would think there should be. Even if it was a token statement that instructed developers on how to incorporate a MySQL database or something.

I probably won't use most of what's there. But I still wanted to get some other eyes on it so I wasn't overlooking something.

Bottom line: Is it assumed that there's going to be a database of some kind behind the GUI?

If so, why isn't it stated as such or am I just kind of slow?

Just wanting to make sure I'm not missing something.

Here's the URL: http://www.bootstrapdash.com/demo/star-admin-free/jquery/src/demo_1/index.html
0
4 Comments
I have upgraded UI bootstrap version to "ui-bootstrap-tpls-2.5.0.js"(so i can use popover functionality) & that's causing some issues in my web page. I seem to get  below errors & i am guessing this may be because of the mismatch between dependencies  & ui-bootstrap-tpls-2.5.0 versions

Does popover work with angular-ui-bootstrap Version: 0.11.2?

angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1 Error: [$injector:unpr] http://errors.angularjs.org/1.2.1/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24uibModal
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at Object.i [as get] (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at i (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at Object.r [as invoke] (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1
    at i (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at r (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)
    at Object.instantiate (angular?v=dU2cIFpfhGmAPaTSxpHrzJ2_PypDC46QGyphUfSbs1I1:1)

Currently i have following references & their version

angular-ui: 0.4.0
angular-resource: v1.2.1
angular-animate: v1.2.1
ui-bootstrap.Jasney.inputmask.js: v3.1.0

Any help would be highly …
0
20 Comments
Good morning all !

I ask for your help on the following problem.
I'm trying to scroll down the list of languages or currencies in my main dropdown but I can not.

Do you have an idea?
thank you in advance

<div class="dropdown">
<button class="btn btn-light dropdown-toggle border" type="button" data-toggle="dropdown"><?php echo LANGUE_DEVISE_TTR; ?></button>
<div class="dropdown-menu" style="width:200px; padding:10px">

	<div class="txt_gras mb-1 small"><?php echo LANGUE_DEVISE_01; ?></div>
	<div class="dropdown mb-3">
		<button class="btn btn-sm btn-light btn-block dropdown-toggle border" type="button" data-toggle="dropdown"><?php echo LANGUE_DEVISE_01; ?></button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">Français</a>
			<a class="dropdown-item" href="#">English</a>
		</div>
	</div>

<div class="dropdown-menu"></div>

	<div class="txt_gras mb-1 small"><?php echo LANGUE_DEVISE_02; ?></div>
	<div class="dropdown">
		<button class="btn btn-sm btn-light btn-block dropdown-toggle border" type="button"><?php echo $MNY_Franc." ".$MNY_Symbole; ?></button>
		<div class="dropdown-menu">
			<a class="dropdown-item" href="#">USD</a>
			<a class="dropdown-item" href="#">EUR</a>
			<a class="dropdown-item" href="#">XOF</a>
		</div>
	</div>

</div>
</div>

Open in new window
0
5 Comments
OWASP: Forgery and Phishing
LVL 19
OWASP: Forgery and Phishing

Learn the techniques to avoid forgery and phishing attacks and the types of attacks an application or network may face.

Start Today!
Hi,

Where can I download bootstrap-multiselect.css and bootstrap-multiselect.js

I don't like to point to a different site to read those files
I like to have them in my folder.

Can you please help me find a site where I can save those two files to my folder.

I have search the web for hours and can't find a download to those files. 

<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
      rel="stylesheet" type="text/css" />

<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>

Open in new window


Thank you for your help,
Lulu
0
4 Comments
error in my angular hi am geting this error
compiler.js:2175 Uncaught Error: Template parse errors:
Can't bind to 'ngModel' since it isn't a known property of 'input'. ("
           placeholder="Add New Task"
           (keyup.enter)="onTaskAdd($event)"
           [ERROR ->][(ngModel)]="addTaskValue"/>
</div>
"): ng:///AppModule/TasksAddComponent.html@5:11
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11388)
    at JitCompiler._parseTemplate (compiler.js:25961)
    at JitCompiler._compileTemplate (compiler.js:25949)
    at compiler.js:25893
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25893)
    at compiler.js:25806
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25805)
syntaxError @ compiler.js:2175
parse @ compiler.js:11388
_parseTemplate @ compiler.js:25961
_compileTemplate @ compiler.js:25949
(anonymous) @ compiler.js:25893
_compileComponents @ compiler.js:25893
(anonymous) @ compiler.js:25806
then @ compiler.js:2166
_compileModuleAndComponents @ compiler.js:25805
compileModuleAsync @ compiler.js:25767
compileModuleAsync @ platform-browser-dynamic.js:223
compileNgModuleFactory__PRE_R3__ @ core.js:40263
bootstrapModule @ core.js:40598
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:79
0 @ main.ts:12
__webpack_require__ @ bootstrap:79
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
…
0
5 Comments
New to Bootstrap 4.0    I need a second row of buttons below the logo that stays with the heading. The code I have keeps putting it to the right

    <header class="app-header">
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark  fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="#navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <a class="navbar-brand" href="/">
                           <img src="/logo/brand.jpg" alt="Company"  />
                    </a>
                </div>  
                <div class="navbar-header">
                   <h1><span class="text-white">Site Name</span></h1>
                </div>                
           		<ul class="nav navbar-nav navbar-right">
       		 	<li><a href="/logout" title='Logout'>Logout</a></li>   		     
      		       </ul>     		              
               </div>
################################################################################# want this on new row below
	    <div>     
                 <ul class="nav navbar-nav">
                      <li><a href="#">Home</a></li>
                      <li><a href="#">Page 1</a></li>
                      <li><a href="#">Page

Open in new window

…
0
6 Comments
I've been working on a custom WordPress site that's using the Understrap theme development framework (which is based on Bootstrap 4).  

Here is the site URL: http://dev.movingpicture.com/

Right now I'm having a problem with some overlaid image captions that I've created using custom CSS (3 different styles).  

If you have a look at to the sections with these headings, these are the image captions that I'm referring to:

1) Check out our services. Then get a quote.
2) Used by hundreds of professionals. Like you.
3) Read the case studies

These overlaid captions are displaying properly in the latest versions of Firefox, Edge, and IE11 .. but are displaying very oddly in Chrome and Opera (with the captions consistently overlapping the bottoms of the images .. in some cases making them invisible).  

Why is this happening in only Chrome and Opera?  And how can I fix my custom CSS so that these captions display consistently across the different browsers (meaning the same way they display in Firefox, Edge and IE11)?    

Although you can simply inspect the underlying source code .. here are my custom CSS snippets for the sake of convenience:

#homepage-services .vc_figure-caption {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    padding: .25em .5em;
    z-index: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
	font-weight:bold;
	font-size:26px!important;	
}

#homepage-professionals

Open in new window

…
0
2 Comments
Dropzone.js on bootstrap page with collapsible left sidebar shows the "Browse" link when the nav bar is collapsed. Inspecting it shows the HTML inserted by the dropzone js, but the positions of the element have changed and the hidden attribute of the element is ignored. This places the element under my collapsed nav bar. See attached. Otherwise, all works as expected.
Here is the HTML from the inspect:

<a class="file-input-wrapper btn dz-hidden-input">Browse<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 21px; left: 59px; height: 0px; width: 0px;"></a>
"Browse"
<input type="file" multiple="multiple" class="dz-hidden-input" style="visibility: hidden; position: absolute; top: 21px; left: 59px; height: 0px; width: 0px;">

Open in new window
0
7 Comments
Hello Experts,

I'm new to MVC and JQuery web development. I'm trying to bind the data to my datatable using JSon object. Below is the sample code:

View
<div id="mdlMsg" class="modal fade" tabindex="-1" role="dialog">
            <div class="table-responsive m-t-40">
                <table id="dtData" class="display nowrap table  dataTable" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Col1</th>
                            <th>Col2</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>
        </div>

Open in new window


Controller
public async Task<ActionResult> Test()
{
 string resp = "";
  var msg = new Dictionary<int, string>();
msg .Add(1, 'Row 1');               
msg .Add(2, 'Row 2');       
      resp= Newtonsoft.Json.JsonConvert.SerializeObject(msg, Newtonsoft.Json.Formatting.Indented);
return resp;
}

Open in new window


Javascript
$.ajax({
        type: 'post',
        url: url,
        processData: false,
        contentType: false,
        data: files,
        success: function (resp) {
 $('#mdlMsg').modal({ show: true })
                var jsonTst = $.parseJSON(resp);
                $('#dtData').dataTable({
                    "bAutoWidth": false,
                    "aaData": jsonTst.data,   //this is your JSON object, which is what is showing in your post above with console.log(data)
                    "aoColumns": [{
                        "jsonTst": "Col1"
                    }, {
                            "jsonTst": "Col2"
                    }]
                });
});

Open in new window


The modal popup shows with no data and also I want to fix my Modal popup to be middle of the page.

Thanks,
ASPDEV
0
17 Comments
Can someone tell me why there is a large amount of padding on the dark horizontal nave here:
https://www.gopherstateevents.com/results/cc_rslts/rslts_by_split.asp?meet_id=600&race_id=2956

but not here:
https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp?meet_id=600&show_indiv=n&hide_team=n&hide_ind=n&sport=Cross-Country

Thank you!
0
3 Comments
Hi All,

I've got myself into a bit of a problem, I've purchased a Cisco 867VAE (I'm already using these around the company) and unfortunately it came with image c860vae-ipbasek9-mz.152-4.M1.bin

This image doesnt support VPN isakmp I need the advanced security ios.

I downloaded c860vae-advsecurityk9-mz.154-3.M4.bin and flashed it to the FLASH booted up and now I get:

System Bootstrap, Version 15.1(4r)M2, RELEASE SOFTWARE (fc1)
Technical Support: http://www.cisco.com/techsupport
Copyright (c) 2011 by cisco Systems, Inc.

C860VAE ipbase platform with 256 MB of main memory


Booting flash:c860vae-advsecurityk9-mz.154-3.M4.bin
boot: Launch entrypt: 0x80800000
Self decompressing the image : ################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################################ [OK]

Wrong IOS image on IPBASE Router

I can goto ROMmon and boot back into the old image but how do properly upgrade this router to the new firmware I downloaded?

Another idential model router on another site is running:
System image file is …
0
6 Comments
FullCalendar (fullcalendar.io) using agendaWeek does not allow me to drag events into the range of 00:00am to 11:59am. When dragging the event into the zone as shown on the image, it disappears or reduces itself.

FullCalendar Agenda Gridload_calendar.js
0
2 Comments
OWASP Proactive Controls
LVL 19
OWASP Proactive Controls

Learn the most important control and control categories that every architect and developer should include in their projects.

Start Today!
I'm looking for a more attractive calendar to use on my classic asp site.  Here is my "home brew" version.  Looking for something that uses bootstrap 4
0
4 Comments
The following aligns inline on a laptop but the input and the submit are stacked vertically on my iPhone.  Can someone tell me what is missing from my structure please?

    <form role="form" class="form-inline" name="which_event" method="post" action="page_name.asp?event_id=<%=lEventID%>">
    <select class="form-control" name="events" id="events" onchange="this.form.get_event.click()">
        <option value="">Select Event</option>
        <%For i = 0 to UBound(Events, 2) - 1%>
            <%If CLng(lEventID) = CLng(Events(0, i)) Then%>
                <option value="<%=Events(0, i)%>" selected><%=Events(1, i)%></option>
            <%Else%>
                <option value="<%=Events(0, i)%>"><%=Events(1, i)%></option>
            <%End If%>
        <%Next%>
    </select>
    <input type="hidden" name="submit_event" id="submit_event" value="submit_event">
    <input type="submit" class="form-control" name="get_event" id="get_event" value="Get This Event" tabindex="19">
    </form>

Open in new window
0
4 Comments
1. Use link https://jsfiddle.net/girinishantg/w9cgzayj/72/
2. click on popover button.
3. popover appears, drag and drop anywhere on the screen
4. now click twice the popover button, the popover will disappear and then on the second click reappear.
5. popover appears again on the same location where left earlier.
6. But for a fraction of second flickering happens.
 
Is there any way to avoid this flickering, please suggest?
0
5 Comments
When patching SQL server 2016 (and other versions), the patch GUI prompts me to stop some processes to "avoid a computer restart," which I do.  After patching I do not receive a prompt to restart the server, which is expected. However, when I check the bootstrap summary log, it reads "Passed but reboot required." Both messages are attached.

So which is it? Is a reboot required or not?
Passed-but-reboot-required.PNG
Processes-check.PNG
1
3 Comments
I get the following error:
'd3' is undefined
The Visual Studio 2017 debugger stops on the file, nv.d3.min.js on this segment: 
e.dispatch=d3.dispatch("render_start","render_end")

Open in new window

The error occurs right after this line of code in my _Layout.cshtml file: 
 @RenderSection("scripts", required: false)

Open in new window

The d3 files referenced on the _Layout.cshtml file were these: 
<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/v1.1.15-beta/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v0.1.1/dist/angular-nvd3.js"></script>

Open in new window

I noticed that one of them was a beta version so I changed it to this: 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/1.29.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.9/angular-nvd3.min.js"></script>

Open in new window

But then I started getting bootstrap errors like this one in my angular.js [dynamic] file :
Unhandled exception at line 1290, column 7 in https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js
0x800a139e - JavaScript runtime error: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="col-lg-12 ng-scope" ng-controller="summaryCtrl" ng-app="surveyApp">'
http://errors.angularjs.org/1.2.8/ng/btstrpd?p0=%3Cdiv%20class%3D%22col-lg-12%20ng-scope%22%20ng-controller%3D%22summaryCtrl%22%20ng-app%3D%22surveyApp%22%3E occurred
That happens in this area of code: 
function bootstrap(element, modules) {
  var doBootstrap = function() {
    element = jqLite(element);

    if (element.injector()) {
      var tag = (element[0] === document) ? 'document' : startingTag(element);
      throw ngMinErr('btstrpd', "App Already Bootstrapped with this Element '{0}'", tag);
    }

Open in new window

I'm not sure if changing the CDN source of the d3.js files caused that because of incompatibility or if there is a different reason. I think that at this point, since I don't know what I'm doing, the more I try to fix it, the more I'm going to break it.
I did not create this app. I inherited it from a programmer that is no longer available.
0
3 Comments
I have a figure inside a column inside a row of col-md-6, so 2 images per row. Users can upload their own images and I am not cropping them to certain dimensions, they are uploaded at whatever dimensions they are.

On the frontend though this is causing an image with the height. The images aren't all the same height and it looks terrible. They should all be of equal height in the row without distorting the image or cropping the width.

I did not want to crop the image upon upload because I want to use the same image in 2 places but each place will be a different size. So, I would rather use one image and just use css to size it differently.

<div class="row">
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 1</h1><img
                    src="http://localhost:3000/userimg1.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 2</h1><img
                    src="http://localhost:3000/userimg2.jpg"
                    class="img-fluid">
            </figure>
        </a></div>
    <div class="mb-3 col-md-6"><a href="/some-link">
            <figure class="meal-photo figure">
                <h1>Pic 3</h1><img
                    src="http://localhost:3000/userimg3.jpg"
                    class="img-fluid">
            </figure>

Open in new window

…
0
4 Comments

Bootstrap

1K

Solutions

4

Content

i
The collection of articles, videos, and posts on this topic.

833

Contributors

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
>
Hall of FameAnnual Expert Awards