BootstrapSponsored by Jamf Now

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. Bootstrap is a front end web framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Share tech news, updates, or what's on your mind.

Sign up to Post

I have ASP.NET web forms application, with master page and lot of user control (ascx)  for menus and Tabs. I want to make the site responsive with bootstrap. I am new to bootstrap. I see newer with newer version of asp.net and visual studio, when i create a new web forms project , the master page already has bootstrap implemented as such

<div class="navbar navbar-inverse>
   <div class = "container">
     ......
           <footer>
     .......

and so on.

can I copy this html layout, directly into my old application ? I'm not sure if tags like <footer><footer> will work? is this html5 element or something related to bootstrap?

also in my old application, I have user controls (ascx) file for navigation, like shown below

<form>
      <usercontrol:navigationMenu>
      <asp:contentPlaceholder id="content" runat =server>
</form>

what would be best approach, to converting to bootstrap.
0
Cloud Class® Course: Microsoft Office 2010
LVL 12
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

Hello everyone,

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

I also use bootstrap to format the pages and would like the pages to maintain formatting. Any suggestions are appreciated :)
0
I 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
I am having a problem with a portion of my HTML not being responsive.  On a desktop, it looks fine - as pictured here:



and on a small screen, such as a phone, it looks like this:



My HTML - links specifically in the stepWrapper Div
<section class="ls ms section_padding_50">
  <div class="container">
    <div class="row">
        <div class="col-sm-12 text-center">
            <div id="stepWrapper" class="stepWrapper">
                <a id="link-manufacturer" href="/RapidRepair/Manufacturer" class="step ">Manufacturer</a>
                <a id="link-deviceModel" href="#" class="step current">Model</a>
                <a id="link-serviceProvider" href="#" class="step">Service Provider</a>
                <a id="link-repair" href="#" class="step">Repair</a>
                <a id="" href="" class="step">Add-Ons</a>
            </div>
            <div class="topmargin_40">
                <h3 class="topmargin_20 ">What model needs repair?</h3>
                <ul class="rapid">
                    <!-- ko foreach: modelList() -->
                    <li><a href="#" data-bind="click:addDevice"><span data-bind="text:name"></span></a></li>
                    <!-- /ko -->
                </ul>
            </div>
        </div>
    </div>
  </div>
</section>

Open in new window


Here is the style for that Div

 <style>
        .stepWrapper {
            text-align: center;
        }

        .step 

Open in new window

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
cardHi Experts,

I want to create lots of cards in a html page.  Please refer the attached sample card.  I want all Cards to be like this  I had tried the following below code to create the card but it is not working as expected.

<div class="card" style="width: 15rem;">		
	           <a href="pages/harriet-dally.html"> <img class="card-img"  src="images/thumbnail/HarrietDouglasDalyetal-PH0238-0383.jpg" style="border:0;"/>
			   <div class="card-img-overlay h-100 d-flex flex-column justify-content-end">
			      <p class="card-text"><strong>Harriet Daly</strong></p>
			   </div>
			   </a>
	    </div>    

Open in new window


I tried to make opacity for the bottom div  on hover and on focus.  but not working.  please refer the attached image for reference I need card to be like this.


Please help me in creating this card

with many thanks,
Bharath AK
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
Cloud Class® Course: Python 3 Fundamentals
LVL 12
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

I have this

<span id="showSchedule" class="btn btn-default">Test</span>

Open in new window


I want to add a + before "test" --> so the button looks like + Test

This can't be that hard but drawing a blank.
0
Hello,

I have built a new default bootstrap theme.  In my sandbox site, the responsive menu works perfect and can be clicked. (view hamburger menu in responsive mode, see link below)
http://sandbox.darkstarmedia.net/sub-page-02/

I have the exact same theme.. unedited.. just copied and pasted in a new site.. but I cannot click the hamburger menu, see link below
http://delmare.darkstarmedia.net/about-delmare/


This makes no sense, they are both bare bone websites using the exact same code
0
Please see here

https://codepen.io/anon/pen/zaOyby

and scroll down to "Example tab 2 (using standard nav-tabs)"

You see how I have a dropdown, and 2 input boxes. How can I align them? the dropdown is to the left. I want all 3 to be in the center.
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
Hi,
i am going to start new project.

for that, i want to use some rich web template.

can you pls. suggest me to some sample of the template website which is been using Bootstrap, AngularJS and other Good UI template...?

I am new for Bootstrap..
0
Hi Experts

Could you point how to apply a Bootstrap datepicker on this specific case?

PHP
 <div class="form-group">
	<label for="nome">Data de Início</label>
	<input type="text" class="form-control" id="datainicio" name="datainicio" placeholder="Data de Início" value="<?php echo $Sessao::retornaValorFormulario('datainicio'); ?>" required>
</div>	

Open in new window


Javascript (jQuery)

<script type="text/javascript" >
    $(document).ready(function(){
      var date_input=$('input[name="datainicio"]'); 
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datepicker(options);
    })
</script>


<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

Open in new window


The way above doesn't works out.

Thanks in advance!
0
Hi experts, I am using bootstrap 3
I have a page with 4 dropdown options and 4 number INPUT with different ids (see dropdown 1 below)
How can I add an eventlistener to either the dropdown or number input changes its value ?
What I am trying to accomplish is calculate the price on the fly (ajax and php)
P.S. I can calculate the price IF THE USER CLICKS A BUTTON, but I want to do the same calculations WITHOUT THE USER CLICK THE CALCULATE PRICE BUTTON

Tnx for any help or suggestions


    <div class="form-row">
     <div class="form-group col-sm-5">
        <label for="sel1" class="control-label">Select list :</label>
        <select class="input-large" id="sel1">
          <option value="399">Nativity Set - 399.00&#160;&#160; </option>
          <option value="189">Deer Set - 189.00&#160;&#160; </option>
          <option value="35">Sheep - 35.00&#160;&#160;</option>
          <option value="35">Cow - 35.00&#160;&#160;</option>
          <option value="35">Donkey - 35.00&#160;&#160;</option>
          <option value="35">Goat - 35.00&#160;&#160;</option>
        </select>
     </div>
       
     <div class="form-group">
      <label for="iQ1" class="col-sm-2 control-label">Quantity</label>
      <div class="col-sm-2">
        <input type="number" class="form-control" id="iQ1" value="1">    
      </div>  
     </div>
    </div>
0
Hi Exoerts

Could you point how to correctly positionate a paginator by using Bootstrap's "mobile first" feature?

The code I'm using:
 <div class="search col-xs-5 col-sm-8 col-md-8 col-xl-12">
	<?= $this->element('/paginacao') ?>
 </div>

Open in new window


When using a large device it's well positionated:
img002
But , when using a small device it isn't well positionated
img001
Device features used:
img003
Could you suggest what must to be changed (or added) to make it to be correct?

Thanks in advance!
0
Head out to https://jc-city-lg.ezonlineregistration.net/ and hover your mouse over either "Consultation Appointment" or "Bio-Consultation Appointment" at the bottom of the screen.

If you're looking at it from your desktop and your screen size is 1200px wide or more, you may notice that when you get the tooltip to display, the screen "jerks." I doesn't do that with smaller screen resolutions, but with the larger desktop screens it does and I don't know why.

That's dilemma #1.

The other dilemma is the tooltip itself. Because I'm activating it with a custom div, I want to position the tooltip a little higher than it's default distance from the top so you can see the arrow.

How do you customize the placement of the tooltip beyond "left, right, top or bottom." I've seen that code, but I'm having a hard time nailting down the way in which I can bring the position of the tooltip up about 10px.

What do you think?
0
Cloud Class® Course: Microsoft Azure 2017
LVL 12
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

I need to find a way to close a scrollable and absolute positioned lightbox popup when a person clicks anywhere outside of the lightbox:

https://staging.royalpalm.com/property/212-alexander-palm-road/

( just click on the large header image up at the top to trigger the lightbox popup )

You'll notice that you can scroll this lightbox popup vertically, and that you can only close it by scrolling back up to the top and then clicking on the "X" in the upper righthand corner.  Ideally, I'd like to change this by doing either of the following:

1) Make is so that if you click anywhere outside of the lightbox to close it (this is the most preferred method)
2) Add a floating "X" button (that follows you as you scroll), that you can click on to close the lightbox (similar to that "Back to Top" button on the lower right of the page)

How would I accomplish either of these?

- Yvan
0
Need some help with a boostrap grid.

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

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

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

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

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

Open in new window

0
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
Dear experts:
Our need textbox with filter which include value and text search
<div id="multiple-datasets">
    <input class="typeahead" type="text">
</div>
Furthermore, when the user has focus on the textbox nothing will be displayed as user starts typing the filtered results will be displayed.

The current data looks like:
Value      Text
ABC             My Academy big company
DEF,GHI  Sample company with multiple associated values
XYZ             Zoombie

The ideal solution should use typeahead, bootstrap and jquery. The following link seems close to what is needed but it does not have a complete solution:
https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/262

For example if I  click on the text box nothing is displayed as I type "a" then first two company Text show up. Notice that the value is hidden.
Note: We already tried a drop down with search (bootstrap select) but the issue we have is that we can not restrict the all descriptions display when the drop down have focus.

Thanks,
0

BootstrapSponsored by Jamf Now

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
>