[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x

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

I have added a bootstrap 4 panel. how can I add a right arrow after the anchor tag , when it is collapsed and add a down arrow on expand?  

<div class="panel-group">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
      <div class="panel-body">Panel Body</div>
      <div class="panel-footer">Panel Footer</div>
    </div>
  </div>
</div>
0
C++ 11 Fundamentals
LVL 12
C++ 11 Fundamentals

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

I can't figure out how to make this content stretch across the entire width of the column.

Check it out...

screenshot
The issue is the fact that I can't get the black section to extend the entire width of the column. Here's the code:

<div class="row">
					<div class="col-12" style="background-color:#ccc;">
						<div class="featured_column" style="width:100%; padding:0px !important; margin:0 !important; height:125px; background-color:#000; margin:0;">
							<div class="featured_title">featured product</div>
							<!--<div class="featured_picture"></div>
							<div class="featured_copy"></div>-->
						</div>
					</div>
				</div>

Open in new window


I've got the actual column colored in grey. The black section is the issue. How can I get it to extend the entire width of the column?

The green "top" is going to be the top section of the div and you'll notice that it has no trouble extending across the entire width of the column. How can get the black section to extend the entire width of the column like the green top?

Thanks!
0
I have two aspx pages, default.aspx and index.aspx .
Index page has lot of controls using multiple dropdowns, one for world region, another dropdown for country, another for capitals .
 I want to open index.aspx page from default.aspx page as a bootstrap modal pop up, and load these dropdowns . users can select these and save them in the database.
I have created a mark up in the default.aspx page for the bootstrap Modal.
I am trying to save/load these values in the dropdown based on the user id . so I have this so far, see below.
I added a WebMethod attribute to my function in index.aspx.cs page.

do i make individual calls to populate each drop down ? all the values for each dropdown needs to saved in the database.
when user clicks saves button , how do i send all the selected value in all the dropdown list to be saved? what would that function look like?


$().ready(function() {
    $.ajax({
        type: "GET",
        url: "Default.aspx/GetRegions",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data) {
            $.each(data.d, function(index, item) {
                $("#ddRegions").get(0).options[$("#ddRegions").get(0).options.length] = new Option(item.Display, item.Value);
            });
        },
        error: function() {
            alert("Failed to load genders");
        }
    });
});  

----------------index.aspx.cs----------------------

 …
0
Can't get bootstrap modal working. Just button is showing up but clicking on it doesn't do anything. Below is my app.component.html content from Angular.

<html>

<head>
  <title></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
  <!-- Bootstrap -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap-theme.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="content-fluid base-padding-top">
    <main>


     <button type="button" class="btn btn-primary btn-large" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="purchaseLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="purchaseLabel">Purchase</h4>
            </div>
            <div class="modal-body">
          

Open in new window

0
Display issue with bootstrap Col 4 and 8. between android and apple.

apple
android

apple once doesnt look like the apple one ? and im not sure why all it is bootstraps col-sm-4 . and col-sm-8 wrapped in bootstraps row.

this is only in apple phones not android.

is also display correctly on chrome but not saferia
0
We have a site that has some js that opens/closes panels in a bootstrap theme.   We want to be able to add to the script to post if the panel is opened or closed so that if the user comes back, it will be open or closed like it was when they were there last.

This is the code that is called in an external .js file.

jQuery(document).on('click', '.panel .tools .fa-chevron-down', function () {
        var el = jQuery(this).parents(".panel").children(".panel-body");
        if (jQuery(this).hasClass("fa-chevron-down")) {
            jQuery(this).removeClass("fa-chevron-down").addClass("fa-chevron-up");
            el.slideUp(200);
        } else {
            jQuery(this).removeClass("fa-chevron-up").addClass("fa-chevron-down");
            el.slideDown(200);
        }
    });

Open in new window


This is the html that is calling it

<div class="col-lg-6 column draggable" id="panel_id_1" data-column="#panel_id_1_col#" data-row="#panel_id_1_row#">

                      <section class="panel">
                          <header class="panel-heading panel-homes">
                              MY NOTIFICATIONS SINCE LAST LOGON					

                              <span class="tools pull-right">
                                <a href="javascript:;" class="fa fa-chevron-down chevwhite"></a>
                            </span>
                          </header>
</section>
</div>

Open in new window


I know I need to add an update to it (I think!) and pass the id variable - id: $(this).attr("id") and some sort of post but I have no idea where to put it, etc to call my script (that I have already written.    Can i get some guidance on where to add this new information to the current script?
0
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 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
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
Exploring SQL Server 2016: Fundamentals
LVL 12
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

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
I have created the following page which is responsive.

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

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

Open in new window

0
Using Yii2 with a modal Bootstrap and the dosamigos TinyMce will only work on the first call.  I have looked all over the net for the solution and found plenty of people with the issue and they explain that it needs to be initialized.  I have tried and tried, but can't seem to get it to work in my case.  As it stands right now, I can finally get the tinymce to appear in subsequent calls, but the content flash for a second and then the control goes blank and I can't work with it.

My index.php view file  is

<?php
use yii\helpers\Html;
use yii\helpers\Url;
use yii\helpers\ArrayHelper;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\bootstrap\Modal; //used to make create a popup window
use backend\models\Projects;
/* @var $this yii\web\View */
/* @var $searchModel backend\models\TicketsSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$this->title = Yii::t('app', 'Tickets');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="tickets-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>

    <p>
        <?php // = Html::a(Yii::t('app', 'Create Tickets'), ['create'], ['class' => 'btn btn-success']) ?>
        <?= Html::button('<i class="glyphicon glyphicon-plus"></i> '.Yii::t('app', 'New Ticket'), 
            [
                'id'=>'modalCreateButton',
                'class' => 'btn btn-success modalButton',
                

Open in new window

0
I had created asection with multiple columns. Now, I wish to start a new row, so I created a new container as well. But when I run the file, the new row is not added. Instead, another column is being made. Can anyone help me in debugging this code.

How can I make the data appear in a new row below the previous one? Any help will be apreciated! Thanks in advance!

0
I want to add a css templete to my angular 4 project to give good look and feel.

Please give me complete steps, how to add my free css templete with my angular 4 project.
0
Greeting World, I am trying to create a -Navbar toggle button using bootstrap. The code below is not working for some reason, can anyone give me some advice on what's wrong with my code? Thanks!


<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">
<title>The Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous" >

<link rel = "stylesheet" href = "css/tether.min.css" />
<link rel = "stylesheet" href = "css/bootstrap.min.css" />
<link rel = "stylesheet" href = "css/lasosa.css" >
</head>

<body>

<nav class="navbar navbar-toggleable-lg navbar-light bg-faded">

    <button class="navbar-toggler-right" type="button" data-toggle="collapse"
     aria-controls="navbarSupportedContent" data-target="#navbarSupportedContent"
      aria-expanded="false" aria-label="Toggle navigation">        


      <span class = "navbar-toggler-icon"></span>
      </button>

      <a href="#">The Andy A Bobien</a>


      <div class="collapse navbar-collapse" id="#navbarSupportedContent">

        <ul class="navbar-nav mr-auto">


            <li class = "nav-item">
            <a href ="#" class = "nav-link">About Me</a>
            </li>

            <li class = "nav-item">
     …
0
hi
i need to include bootstrap.js file to my custom theme created on magento2 website
how to to do it? i tried adding in default_head_block.xml i am getting as jquery is no defined, i need bootstrap js to load across the website
0
Need to have an asp.net form that uses bootstrap as well...newbie to asp.net, if code or samples could be provided would be appreciated.

Thanks
0
I am working on a project using aspdotnetstorefront 9.4. It has been a number of years since I have used the product and in the past it was mostly fronted development. What I need help with is that currently there is a login menu link and it should take you to a signin page. What we are currently trying to implement is using bootstrap 4, upon clicking the login menu link in a hidden div or dialog box there would be a login form that would allow you to sign-in to the site. I have already been able to implement the form with bootstrap on the visual side, but I am not sure how to code the form so that when you login the form actually works and logs you in.

Any help or code is most appreciated!
0
OWASP: Threats Fundamentals
LVL 12
OWASP: Threats Fundamentals

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

This is a follow up question of
https://www.experts-exchange.com/questions/29087446/Jquery-based-responsive-date-picker.html

The typical example only shows the date range with no icons:
https://uxsolutions.github.io/bootstrap-datepicker/?markup=range&format=&weekStart=&startDate=&endDate=&startView=0&minViewMode=0&maxViewMode=4&todayBtn=false&clearBtn=false&language=en&orientation=bottom+auto&multidate=&multidateSeparator=&autoclose=on&keyboardNavigation=on&forceParse=on&toggleActive=on#sandbox
My current requirements are:
 - Responsive (must work Real Ipad and mobile galaxy)
 - When day is selected the date picker must close.
 - When picker is shown, it must open down the picker location.
 - Date range must work with icons and have similar behaviour as per current sample link.
 - It supports IE11 onwards, Chrome (latest and previous 3 releases) and Safari.
 - It supports Iphone 7 and up and Galaxy S5 and up.

 We are currently using Bootstrap latest 3.x version and Jquery 1.12.x
0
I am working on a site that i am trying to keep self contain to one page with bootstrap using carousels and modals.  I have  to create 4 photo galleries on the site and allow each of the galleries to function in a modal with a lightbox/carousel inside them.  I have tried all of the solutions I can find online and nothing seems to work or only works partially.  I really need some helps as I have a deadline fast approaching and am still learning this stuff.

I am happy to provide code if needed but if any one can point me to a solution that will work I would be thrilled.  I will be hosting this solution in Azure as well.

Thank you in advance.

Dorinda
0
My boostrap menu is not functioning properly for mobile. Below is my site.Master page. On a desktop the default page displays properly and when I shrink the window, I get the hamburger and the submenu items. When i open the site on a mobile device:
  1. The menu is still displaying as it would on a desktop (no hambuger)
[list=2]When I click/press the Services link/button, nothing happens.[/list]

What am I missing / doing wrong?

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>
<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <title><%: Page.Title %>- My ASP.NET Application</title>
    <link href="~/Content/Site.css" rel="stylesheet" />
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
		
    <asp:PlaceHolder runat="server">
        <script src="<%: ResolveUrl("~/Scripts/modernizr-2.6.2.js") %>"></script>
    </asp:PlaceHolder>
		
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/bootstrap.js"></script>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <link href="Content/bootstrap-submenu.css" rel="stylesheet" />
		
    <asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference 

Open in new window

0
I have upgraded my application from Angular 4 to Angular 5. After the upgrade the glyphicon icons are not showing up

<span class="glyphicon glyphicon-user" style="cursor:pointer"></span>

Open in new window


In the browser console, this error is displayed


Glyphicon error
I continue to use the same version of bootstap v3.3.7 and it is also included in angular-cli.json (no changes here as well)

"styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/ngx-toastr/toastr.css",
        "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
        "styles.css"
      ],

Open in new window


Is there something else that needs to be done in order to make the icons work? Other bootstrap styling is working fine.
0
seeing weird characters from webresponse for bootstrap contents. results expected as this image expected.png, but all i see is below image
result.png
0
I saved my images into bytes in project B to show it in project A.
I did this to try to get the image from the particular id to show, problem is 1.image does not show , 2.it only shows image from EImage01Byte and i need to show the image from EImage0Byte when i click next
<div class="carousel-inner" role="listbox">
      <asp:Repeater ID="rptrImages" runat="server">
          <ItemTemplate>
    <div class="item <%# GetActiveClass(Container.ItemIndex) %>">
       <img src="<%#Eval("EID") %>/<%# "data:image;base64," + Convert.ToBase64String((byte[]) Eval("EImage01Byte")) %>"></img>
  </div>  
              </ItemTemplate>
          </asp:Repeater>
  </div>

Open in new window

Then i did this. Now, all the images in EImage01Byte regardless of the id, so thats a problem, also i need the second image
 <div class="carousel-inner" role="listbox">
      <asp:Repeater ID="rptrImages" runat="server">
          <ItemTemplate>
    <div class="item <%# GetActiveClass(Container.ItemIndex) %>">
       <img src="<%# "data:image;base64," + Convert.ToBase64String((byte[]) Eval("EImage01Byte")) %>"></img>
    </div>  
              </ItemTemplate>
          </asp:Repeater>
  </div>

Open in new window

my code behind is like this !!
 BllCompEventCatalog eve = new BllCompEventCatalog();
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindEventImages();
            }
        }
        private void BindEventImages()
        {
            Int64 EID = Convert.ToInt64(Request.QueryString["EID"]);
            DataTable ds = eve.getEventAll();
            rptrImages.DataSource = ds;
            rptrImages.DataBind();
        }
        protected string GetActiveClass(int ItemIndex)
        {
            if (ItemIndex == 0)
            {
                return "active";
            }
            else
            {
                return "";
            }
        }

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
>