We help IT Professionals succeed at work.

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.

My background is in Oracle development but currently I'm trying to learn and maintain a web app.  We are using the google geocoder location thingy to "find stores" based on the entered zipcode or address.  We have error messages that are initially hidden, but then go through logic to display the correct error message if the search is not successful.  

Initially we use something like
<li><div id="geocoder-error-zero-results" class="d-none">@Global.GeocoderErrorZeroResults</div></li>

Open in new window

to, I'm guessing, set up the page but leave the messages hidden.

Once the user enters a zipcode, such as 00000, the status is set to ZERO-RESULTS and goes through logic in a javascript file, but the error message is never displayed:
$('#geocoder-error-zero-results').css("display", "block");

Open in new window


I have tried the following:
Changing d-none to another class that we have defined as display: none (without !important)
Changing the above javascript to
("display", "block !important")

Open in new window

Changing the above javascript to
$('#geocoder-error-zero-results').removeClass("d-none");

Open in new window


None of these have worked.  Any ideas?  

Thank you!
0
Is there any bootstrap payment form that can be downloaded for free ?

Thx
0
I have a select element where options are built from parts of a database table rows. The content is typically up to 100 characters in length.

We are trying to build a responsive interface using bootstrap. On the phone version (class="col-xs-n"), the select pulldown extends FAR to the right of the viewable area; to see items requires moving to the right on the phone, a messy and non-professional look.

The customer requires that most of the content (at least 80%) needs to be in each <option>xxx</option> element.

I have tried inserting a line break (<br>) in the middle of the string, doing that only shows the portion AFTER the <br> in the option pulldown.

There must be a way to do this or another technique for showing a pulldown list with VERY lengthy option content.

Suggestions?
0
Head out to http://new.brucegust.com/brochure/. I've got a carousel on the left hand side that I want to equip with the two arrows on either the side that can be clicked on to manipulate the carousel itself.

If you look at the source code, you'll see them where they ought to be, but they don't work.

Any idea why and how to fix it?

<div id="carousel-sites" class="carousel slide" data-ride="carousel">
				<div class="carousel-inner">
					<div class="carousel-item active">
						<a href="https://new.brucegust.com" target="_blank"><img src="images/nomas.jpg" class="carousel-pictures" border="0"></a>
					</div>
					<div class="carousel-item">
						<a href="images/dvd_large.png" target="_blank"><img src="images/dvd.jpg" class="carousel-pictures" border="0"></a>
					</div>
					<div class="carousel-item">
						<a href="http://www.timbersys.com/cart/index.php" target="_blank"><img src="images/timbersys.jpg" class="carousel-pictures" border="0"></a>
					</div>
					<div class="carousel-item">
						<a href="http://muscularchristianityonline.com/forum" target="_blank"><img src="images/muscular.jpg" class="carousel-pictures"  border="0"></a>
					</div>
					 <a class="left carousel-control" href="#carousel-sites" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left"></span>
				</a>
				<a class="right carousel-control" href="#carousel-sites" role="button" data-slide="next">
					<span class="glyphicon 

Open in new window

0
I'm trying to get a bootstrap set of elements to be centered on a smart phone screen.

I have this code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <title>Backflow Assembly & Test Report Form</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
            .wrapper {
            max-width: 800px;
            min-width: 480px;
            margin: 0 auto;
        }
            /* unvisited link */
            a:link {
              color: white;
            }

            /* visited link */
            a:visited {
              color: purple;
            }

            /* mouse over link */
            a:hover {
              color: hotpink;
            }

            /* selected link */
            a:active {
              color: blue;
            }
    </style>
0
Why does the CSS in the 2nd row of this simple code get ignored?

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css">

    <title>Backflow Assembly & Test Report Form</title>
    <style>
        .nopadding {
            padding: 0 !important;
            margin: 0 !important;
        }
       
        .wrapper {
            max-width: 767px;
            min-width: 480px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <form method="POST" name="st" action="chk_login.php" onSubmit="return chk_vals();">
            <div class="container-fluid" style="background-color: #DFDFDF;" >
                  <div class="row" style="background-color: black;">
                        <div class="col-xs-2 col-sm-2 col-md-2" …
0
Hi Experts,

I'm having trouble creating a mulitselect  Laravel form to show multiple columns. This is my current setup:

Controller:
public function edit($id)
    {
        //

        $user = User::findOrFail($id);
        $assets = Asset::all()->pluck('id', 'asset_name')->toArray();

        return view($_ENV['VIEW_FOLDER_VERSION'] . '/views/users/edit', compact('user', 'assets'));
    }

Open in new window



Blade:
<div class="form-group">
        {{Form::label('assets', 'Assets')}}
        {{Form::select('assets[]', $assets ,null,array('multiple'=>'multiple','name'=>'assets[]','class'=>'form-control'))}}
      </div>

Open in new window


MySQL Table
mysql.PNG

This is what I see:
multiselect.PNG

Can you please help point me in the right direction?

Thanks,
Ricky
0
Here's my code:

@foreach($videos as $video)
								<tr>
									<td><a data-toggle="modal" href="#video_player-{{ $video->id }}">{{ $video->title }}</a></td>
									<td style="text-align:center;"><a href="{{ url('/admin/show/video/' .$video->id) }}">edit</a> | <a data-toggle="modal" href="#deletePostModal-{{ $video->id }}">delete</a></td>
								</tr>
							@endforeach			

Open in new window


Bottom line: When the user clicks on the title of the video they get a popup that allows them to view the actual file.

I want to incorporate another feature, however, in that when the user hovers over the video title, they get a tooltip that lets them see the thumbnail associated with that file.

I can see how it's done, at least as far as being able to view some simple text like this:

https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp

But how do I get two different functionalities to exist side by side with one being activated with a mouseover, the other with a click - both of which, apparently require the "data-toggle" dynamic?

Thanks!
1
Hi Experts


Could you point how to configure this Bootstrap buttons to be correctly distributed accordingly with this layout?

img010

<div class='row'>

      <div class="panel panel-primary">
      
          <div class='row'>
          
            <div class='col-md-8 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Minhas Fotos
                </button>
              </div>
            </div>
            
            <div class='col-md-6 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Todas as Fotos
                </button>
              </div>
            </div>
              
            <div class='col-md-4 pull-right'>
              <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" onclick="hotsite.vitrine.novo();">
                  <i class="fas fa-video" aria-hidden="true"></i> Enviar Foto
                </button>
              </div>
            </div>
              
          </div>  
       
    </div>
</div>

Open in new window


Thanks in advance!
0
Why are my labels not in line with my form elements on this page: https://www.gopherstateevents.com/results/fitness_events/rslts_w_laps.asp?event_id=969

Please and than you!
0
Hi Experts


Could you point how to adapt this PHP/ Bootstrap code to correctly format the desired layout?

Accordingly with this code:

@extends('layouts.appinterno')

@section('content')

	<div class='row'>

	{{ csrf_field() }}

  	  	<!--div class="col-xs-12 col-sm-4 col-md-4"-->
        <div class="col-md-10 col-sm-12">
		    <p class="titResumoNoticia">Arquivo de Fotos</p>
		   
     
            @foreach($vitrinesX as $vitrine)

                <section class="row">

                               
                        <div class="col-sm-12 col-md-4">
                            <div class="box-noticias">
                               	<a href="javascript:void(0);" onclick='xxx.vitrine.abrirNoticia({{$vitrine->id}});' >
        	    				{{$vitrine->titulo}}
        	    			    </a>                    
                            </div>
                            
                            	<p id="like" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 1)">
				                    <i class="fa fa-thumbs-up"></i> <span id="qtdeCurtiu_{{ $vitrine->id }}">{{ $qtdeCurtiu }}</span>
				               	</p>   
                                    
           						<p id="dislike" class="likes" onclick="xxx.vitrine.salvarEscolha({{ $vitrine->id }}, 0)">
				                    <i class="fa fa-thumbs-down"></i> <span id="qtdeNaoCurtiu_{{ $vitrine->id }}">{{ $qtdeNaoCurtiu }}</span>
						       </p>       
                        </div>     

Open in new window

0
Hi, I'm looking for a Css/Bootstrap (Web Responsive) skeleton for my page.
Please  see the following diagram with explanations:
A diagram describing what I need
0
Hi Experts

Could you point how to adjust this PHP/ Bootstrap code to repeat 02 times the same box at the right part the same way it is at the left part?


Accordingly with these pictures:

img004
To:
img006
The code actually in use:
<section class='row'>
	<div class="col-md-12 titulo">Vídeos</div>
    <div class="col-md-12 text-center">
        <a href="/videos">
            <img src="{{ asset('img/img_thumb_video_gadget.jpg') }}" />
        </a>
    </div>
    <div class="col-md-12" style="padding-top: 9px;">
        <a href="/videos">
            ver todos os vídeosXX
        </a>
    </div>

	<script src="{{ asset('js/.../xxx.Noticia.js').'?v='.....) }}" ></script>
<section>

Open in new window


Thanks in advance.
0
I wanna use a bootstrap data table but i cant get it to work.
this it the code in my header:
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
    <script type="text/javascript"  src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>>

Open in new window


What line do i need to add to get bootstarp datatable since the one i have been using does not seem to work.
0
Hello Experts,

I have a textbox(input) when user enter accept only numbers(digits only) and it should be 10. Once entered we need for format like (123)456-7890. I tried below but not working as expected.
CSHTML
 <input type="text" id="PhoneNumber" name="PhoneNumber" value="" class="form-control" autofocus="autofocus" maxlength="11">
                                <span class="bar" id="ErrMsg" ></span>
                                <label for="PhoneNumber">Phone</label>

Open in new window


JS
$("#PhoneNumber").keypress(function (e) {
    //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
        //display error message
        $("#ErrMsg").html("Digits Only").show();
        return false;
    }
});

$("#PhoneNumber").blur(function (e) {
    phone = $(this).val();
    if (phone.length != 10) {
        $("#ErrMsg").html("Phone number must be 10 digits.").show().fadeOut("slow");
        return false;
    }
    else
        $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));
});

Open in new window


I have couple of issues with the above code, first I did Maxlength 11 then only it's accepting 10 digits and also I get format like this (123)456-0 (since my maxlenght was 11). After changing Maxlength to 14, I still get same issue. Please suggest how can I solve this.

Thanks,
ASPDEV
0
This is coming from a Bootstrap template that apparently allows you to center some content, but it's not working for me and I don't know why.

Here's the way the page looks currently:

current login page
It doesn't look bad, but I want to center the content so it looks more like this:

new login
Here's the code that I've been wrestling with:

<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8 satellite_row">
				<h5>NOMAS<sup>&reg;</sup> International Admin Dashboard</h5>
				To login to the NOMAS<sup>&reg;</sup> International Admin Suite, enter your email and password below, then click on "login."
				<br><br>
				if you run into any issues or questions, contact Bruce Gust at <a href="mailto:bruce@brucegust.com">bruce@brucegust.com</a>.
				<br><br>
				Thanks!
				<br><br>
					<div class="card">
						<!--<div class="card-header">{{ __('Login') }}<br><br></div>-->
						
						<div class="card-body">
							<form method="POST" action="{{ route('login') }}">
								@csrf

								<div class="form-group row">
									<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>

									<div class="col-md-6">
										<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>

										@error('email')
											<span class="invalid-feedback" 

Open in new window

0
I'm working with Laravel 6 and attempting to create a login dynamic that utilizes a modal as opposed to having to go to a separate page.

First step: Make sure my user can bring up said modal by clicking on the "login" link. I'm working through a tutorial that makes it look real easy, but I can't even get the modal to become visible.

Here's my code, I've got screenshot attached as well...

What am I missing?

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>NOMAS International</title>

    <!-- css -->
    <link href="http://nomas.site/assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="http://nomas.site/assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="http://nomas.site/assets/plugins/cubeportfolio/css/cubeportfolio.min.css">
    <link href="http://nomas.site/assets/css/nivo-lightbox.css" rel="stylesheet" />
    <link href="http://nomas.site/assets/css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css" />
    <link href="http://nomas.site/assets/css/owl.carousel.css" rel="stylesheet" media="screen" />
    <link href="http://nomas.site/assets/css/owl.theme.css" rel="stylesheet" media="screen" />
    <link 

Open in new window

0
New to Laravel. Going through some tutorials and I'm working with a Bootstrap template. On the "welcome.blade.php" file, there's a section that looks like this:

 <!-- Section: intro -->
    <section id="intro" class="intro">
        <div class="intro-content">
            <div class="container">

From what I understand, you're going to use a layout and at one point you'll have a "@yield('content')," which is Blade's way of allowing for content coming from a section called "content."

But I've not found anything in the instructional material that references "id's."

What is the significance of a "section id?"
0
I am creating a page that I want to be mobile-friendly using bootstrap.  Looking for advice, primarily structure and formatting but I will take design advice, on this page before I get to far into it:

https://www.gopherstateevents.com/series/cc_nordic/how_it_works.asp?series_id=24

Thanks!
0
Hello,

If you view my menu here on an iPhone or a responsive view.

http://careers.baffinland.com

The menu will slip below the logo and have the dropdown menu fly out to the right.  How can I make it locked to its position at top and fly out to the left below the logo?  So the hamburger menu will be aligned to the right side of the dropdown menu
0
Hello,

Currently my responsive menu will appear at 768px, I want to change it to appear at 993 and I cant find it anywhere in my css or bootstrap navwalker code.

http://careers.baffinland.com/
0
Hi,

How can I say if the dropdown list has been selected then append the value or the text to the textarea box.

I'm using bootstrap dropdown list.

  $("#AppendConditionBtn").click(function () {

            var RangeBoxFrom = $("#RangeBoxFrom").val().length;
            var RangeBoxTo = $("#RangeBoxTo").val().length;
            var GetOperatorSelectValue = $("#OperatorSelect option:selected").val();
            var GetConditionSelectValue = $("#ConditionSelect option:selected").text();
            var GetValueSelectValue = $("#ValueSelect option:selected").val();
            var GetGroupSelectValue = $("#GroupSelect option:selected").text();
            var GetItemsTextAreaValue = $("#ItemsTextArea").val();
            var GetOperatorSelectForRangeValue = $("#OperatorSelectForRange option:selected").val();
            var GetConditionSelectForRangeValue = $("#ConditionSelectForRange option:selected").val();
            var GetValueSelectForRangeValue = $("#ValueSelectForRange option:selected").val();
            var GetRangeBoxFromValue = $("#RangeBoxFrom").val();
            var GetRangeBoxToValue = $("#RangeBoxTo").val();

             if (RangeBoxFrom > 6 || RangeBoxTo > 6) {
                 alert("Range should be less than 6 character");
                 return false;
             }

// Here how can I say if the multiselectbox list has been selected then append the value or text to the "ContidionsAndAttributesTextArea"
otherwise don't append. 

        

Open in new window

0
Ok I know this sounds bizarre but I have a web page that I access on my phone.  It has a "submit" button that I need to be very sensitive to the touch, so that the instant I press it, it responds.  Sometimes I have to do it multiple times to get it to submit.  I assume an app would be better but for now my only option is a web page.  Is there any way that I can make this a more "responsive to pressing" submit button than it is now?  It is big enough that it is hard to miss.

Thank you!
0
Hi,

This is driving me crazy and I need your help please.

1. I have a dropdown list that has list such as px, dx....
2. I have another dropdown list that gets populated based on the first dropdown list
so if the user select from the first dropdown list px the second dropdown list should get populated with the list of px codes

the problem is when I inspect the element on the second dropdown list I do see my list getting populated and changing upon a different selection
but the issue is I don't see the changes on the bootstrap dropdown list.

This is what I have:

 $('#GroupSelect').multiselect(getGroupOptions(true));       //If I remove this code and the code below it will work but without the style 

        $("#ConditionSelect").change(function (event) {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data }).done(
                function (json) {
                    $('#GroupSelect').empty();
                    $('#GroupSelect').append($('<option>').text("Select"));
                    $.each(json, function (i, obj) {
                        $('#GroupSelect').append($('<option>').text(json[i].Text).attr('value', 

Open in new window

0
Hi,

I have a dropdown list on my partial view dialog box

If I remove the class from the <select> and remove the multiselect

my data will get populated but I need to have my style and populate my data

so if I remove from my select this class:
class="btn btn-default dropdown-toggle"
and
remove the multselect function:
//    $('#GroupSelect').multiselect(getGroupOptions(true));

then my select box will get populated but I need my style
how can I have my style and populate my dropdown list?

<script >
    $(document).ready(function () {

        $('#GroupSelect').multiselect(getGroupOptions(true));


   function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'
               
            }
        }


        $("#ConditionSelect").change(function (event) {
           // event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, 

Open in new window

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
>