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

How to add few spacing between the image and the paragraph text ?

Thxtest.phpImage.png
0
Exploring ASP.NET Core: Fundamentals
LVL 19
Exploring ASP.NET Core: Fundamentals

Learn to build web apps and services, IoT apps, and mobile backends by covering the fundamentals of ASP.NET Core and  exploring the core foundations for app libraries.

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
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
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
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
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
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
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
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
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
OWASP: Threats Fundamentals
LVL 19
OWASP: Threats Fundamentals

Learn the top ten threats that are present in modern web-application development and how to protect your business from them.

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
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
0
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
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
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
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
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
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
Python 3 Fundamentals
LVL 19
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 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
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
backdrop
I am unable to edit the entries in the bootstrap modal box due to the shadowed backdrop. The cursor is disabled at this point and the screen freezes when the modal box is opened. This only occurs on the first page or a unknown page height of the html page. I would like to enable the ability to edit the values or remove the backdrop altogether if it will solve the problem.

Please see the code below:

<h3>Inserting Data into the database</h3>
    <h3>Data List</h3>
    <div id="storesF">
    <div id="modalStationForm">
        
      <!--<form action="/upload" method="post" id="stationForm" enctype="multipart/form-data">-->
      <form id="stationForm" method="POST" action="/station" enctype="multipart/form-data" >
        <label>Store Name:</label>
        <!--When submitting a form, the name value is important and is used in php file, while the id is used for css and javascript(below)-->
        <input type="text" name="station" id="store" size="40" placeholder="Enter Store Name">
        <br><br>
        <!--
        <label for="file">Profile Photo:</label>
        <input type="file" name="image" id="image" onChange={this.uploadFile}>
        <br><br> -->

        <label>Address:</label>
        <input type="text" name="address" id="location" size="40" placeholder="Enter the store's address">
        <br><br>

        <label>Store Sales:</label>
        <input type="number" name="monthlycstoresales" id="sales" size="20">
        <br><br>

Open in new window

0
I have a horizontal form that I created in an ASP.NET MVC 5 project with Bootstrap 3 (I know this is an old version and may convert to version 4 later). The form-horizontal form is not fitting the full width of the screen even though I have a total of 12 columns in the class. I'm sure it's a simple fix, I just haven't been able to figure it out. I am not using any custom CSS on this page. Here is part of the code. It just has one of the divs. I can provide full code if needed.

<h2>Create Customer</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <h4>Customer</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })


        <div class="form-group">
            @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
            </div>
        </div>

Open in new window

0
How can I make the form on the below page more mobile-responsive:

https://www.gopherstateevents.com/results/fitness_events/results.asp?event_type=5&event_id=836&race_id=1447

Thank you!
0
I really like the look of these sections: https://mdbootstrap.com/docs/jquery/sections/magazine/  but when I add it to my page, and add their css, it destroys the basic look of my page, making the fonts much smaller.

Can I sort of section off the magazine part and have it use different css files?
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
>