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

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
Build an E-Commerce Site with Angular 5
LVL 13
Build an E-Commerce Site with Angular 5

Learn how to build an E-Commerce site with Angular 5, a JavaScript framework used by developers to build web, desktop, and mobile applications.

Normally when I see a website using Bootstrap 4 I see the grid classes being used in the HTML. Recently I used a developer who has now managed to implement the grid glasses in the CSS. Is this normal practice and does it work out better?

I'm trying to understand if there are performance vs maintenance trade offs to consider as I'm finding it hard to understand the grid behaviour for HTML elements since the grid classes are not in the HTML. Is this related to Bootstrap Sass mixins?
0
Hello to everyone,

since my main PC is broken,I'm playing with my mac mini while it is fixed. I've just removed mac os x and I have installed vista sp2 on the first 50 gb of space and I'm trying to install linux on the rest of the space (30 gb). I'm not able to boot any os from the USB port,so I'm looking for a way. I found this tool that could help me :

http://www.rodsbooks.com/refind/installing.html

I'm interested to the part that explains how to Install rEFInd Manually Using Windows. He says :

To install rEFInd under Windows, you must first find a way to access the ESP, which Windows normally hides from view. One way to accomplish this goal, and to proceed forward once the ESP is accessible, is as follows:

Locate Command Prompt in the Start menu, right-click it, and select Run as Administrator. This action opens a Command Prompt window with administrative privileges.

Type mountvol S: /S in the Administrator Command Prompt window. This makes the ESP accessible as drive S: from that window. (You can use a drive identifier other than S: if you like.)

I tried to do what he suggested,but I've got this error :

Microsoft Windows [Versione 6.0.6002]
Copyright (c) 2006 Microsoft Corporation. Tutti i diritti riservati.

C:\Windows\system32>mountvol S: /S
Parametro non corretto.

the disk where I have installed vista is a MBR base disk. Should I convert it to GPT ? …
0
I am struggling a little bit with the tooltips on the quote form on this page. They are just fine at full size, but when you resize the viewport, they get cut off.

I need them to adjust to fit on the screen no matter the viewport size. Bootstrap does have built in tooltip defaults, but for these specific ones, I have some css in the head of this page to override those as so not to affect the rest of the site. So that's where I need to make the edits.

Thanks!

https://www.stadriemblems.com/products/ajax/custom-enamel-pins/
0
I have a list.aspx page with a table with lot of columns. I used bootstrap container on my master page in asp.net.

for this particular page, list.aspx, I want to have a full screen mode. which when click will expand or turn the table into full screen mode.

is there any javascript/jquery libraries which can do that or do I have to build a new page or modal to do such a thing. if so, is there any javascript table libraries which can load into a bootstrap modal, which I can eventually display in a full screen mode?
0
Hi,

I am trying to reverse the order of a set of columns using bootstrap .d-flex flex-column-reverse

Here is my markup, the order gets reverse but they are no longer inline?

<div class="container p-0 row-actions">

<div class="col d-flex flex-column-reverse col-sm-5 p-0 clearfix align-items-stretch">

<span class="col-6 w-50 pl-0 float-right d-inline-block">Edit Gift</span>  

<span class="col-6 w-50 pr-0 float-right d-inline-block">Remove</span>

<span class="col-6 w-50 pr-0 float-right d-inline-block">Quick Edit</span>  

<span class="col-6 w-50 float-right d-inline-block">Copy</span>
</div>
</div>

Open in new window



Would appreciate some help here.

Many Thanks,

Andrew
0
I have a web application that is leveraging Telerik RadGrid to display database content. Framework is MVC with C#. I am trying to display a bootstrap alert with a message "Record Successfully Added". The issue is the Bootstrap Alert is never displayed. When I move the code to a page without the RadGrid, the Alert displays perfectly...So I believe this is a timing issue. I believe the placement of the Alert could also be the issue, but I can't seem to get this to work. See chtml code below. @Html.Action("ShowAlert") is the call for the Alert which I can run in debug and see the alert populated.

@{
    ViewData["Title"] = "Meals";
    ViewData["Icon"] = "fa-utensils";
    ViewData["Subtitle"] = "Stay tuned, wonderful content will arrive here soon.";
}

<div class="br-section-wrapper">
    @Html.Action("ShowAlert")

    @(Html.Kendo().Grid<synergix365.Models.Maintenance.Master.Meals>()
                .Name("grid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Meal_ID).Title("Meal ID").Visible(false);
                    columns.Bound(p => p.Coop_ID).Title("Co-op ID").Visible(false);
                    columns.Bound(p => p.Meal_Name).Title("Meal Name");
                    columns.Bound(p => p.Meal_Type_ID).Title("Meal Type ID").Visible(false);
                    columns.Bound(p => p.Meal_Type_Name).Title("Meal Type");
                    columns.Bound(p => p.Charge).Title("Charge");
                    columns.Bound(p 

Open in new window

0
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<div class="card journeyCard" data-id="ace6791c-6748-11e9-86aa-0a002c2a7a8a" style="animation-delay: 0.15000000000000002s;">
<div class="card-image">
<a href="j" class="img-fluid"><img src="" onerror="this.onerror = '';this.src='/client-area/images/noimage.png';" class="img-fluid"></a>
<span class="badge badge-light">Draft</span><br>
</div>
<div class="card-content">
<h4 class="text-truncate">
<a href=".php?id="><b>Campaign One</b></a>
</h4>
<div>Vanity URl: <strong>www.etgttgtg.com</strong></div>
<div>Created By: <strong>Admin</strong></div>
<div>Updated: <strong>2 hours ago</strong></div>
</div>
<div class="card-actions">
<div class="btn-group dropright show">
    <button type="button" class="btn btn-main dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        <i class="fa fa-ellipsis-v"></i>
    </button>
  <div class="dropdown-menu show" x-placement="right-start" style="position: absolute;transform: translate3d(40px, -10px, 0px);top: 0px;left: 0px;will-change: transform;/* overflow: visible !important; */">
        <a class="dropdown-item" target="_blank" onclick="editJourney('ace6791c-6748-11e9-86aa-0a002c2a7a8a')"><i class="fa fa-edit"></i> Edit</a>
        <a class="dropdown-item" target="_blank" onclick="archiveJourney('ace6791c-6748-11e9-86aa-0a002c2a7a8a')"><i class="fa fa-archive"></i> Archive</a>
        <a class="dropdown-item" target="_blank" 

Open in new window

0
when click actionlink the collapse go to the  top menu


<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>@Page.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
  
</head>
<body>
    <!--Navbar Header-->
    <div class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div>
                    @*<a href="~/Home" class="navbar-brand">
                        <img src="~/images/Logotrans2.png" class="logo-size img-responsive pull-right" />
                    </a>*@
                </div>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="~/Home">
                            <span  class="glyphicon glyphicon-home"></span>
                            الرئيسية
                        </a>
                    </li>
                    <li>
                        <a 

Open in new window

0
I have used bootstrap to design a webpage nav. Is there a way to set the width to a maximum of 1200px; The original code is below

<div class="containert" style="width=800px">
<div class="row">
<nav class="navbar navbar-expand-md navbar-light bg-white fixed-top navfont">
  <img src="images/title.jpg" alt="logo">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav text-default ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#top">HOME~</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">ABOUT~</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#projects">PROJECTS~</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">CONTACT~   </a>
      </li>
    </ul>
    <span class="navbar-text">
      <i class="fa fa-twitter"></i>
           
        <i class="fa fa-facebook-f"></i>
             
           <i class="fa fa-instagram"></i>

</div>
</div>
0
CompTIA Network+
LVL 13
CompTIA Network+

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

    <div id="document_<?php echo isset($id) ? $id : '' ?>" class="col-sm-3">
  <div style="height:440px" class="card">
    <img id="doc_img_<?php echo isset($id) ? $id : '' ?>" style="height: 200px;" class="card-img-top border-bottom" src="<?php echo isset($img) ? $img : 'images/noimage.png' ?>"  alt="Card image cap">
    <div class="card-body p-2">
    <div class="card-header">
    <h4 style="height: 30px;" id="doc_title_<?php echo isset($id) ? $id : '' ?>"><?php echo isset($title) ? $title : '' ?></h4>
    </div>
    <div style="height: 130px;" class="col-sm-12 nano mb-1">
        <p class="nano-content" id="doc_des_<?php echo isset($id) ? $id : '' ?>" style="  margin-bottom: 0;"><?php echo isset($description) ? $description : '' ?></p>
        </div>
    <div class="btn-group col-sm-12 mx-auto" role="group" aria-label="Basic example">
     <button type="button" class="btn btn-main col-sm-6"> <a style="color:#fff !important;" target="_blank" href="<?php echo isset($file) ? $file : '' ?>" >Preview</a></button>
      <button id="document_actions"  data-id="<?php echo isset($id) ? $id : '' ?>" type="button"  data-toggle="dropdown" aria-haspopup="true" class="btn btn-zymplify col-sm-6 dropdown-toggle">Manage</button>
      <div class="dropdown-menu" aria-labelledby="document_actions">
          <a data-id="<?php echo isset($id) ? $id : '' ?>" class="dropdown-item edit_document" href="#"><i class="fa fa-cog mr-1 "></i>Edit</a>
          <a data-id="<?php echo isset($id) ? 

Open in new window

0
Does the old or deprecated web design framework has affected on a new web application functions, performance or even compatibility?

In our company we have old design for our Web Appliction but there are some issues and bugs raises every time for some Web pages controls like Drop down, links,... etc.

Thanks in advance
0
I use bootstrap controls with ajax update panel in Modal

if I use the  postback the controls lose the css  , and the dropdownlist the search is disabled

this is the controls befor postback

this is the controls after postback
0
I have an MVC C# Web Application and am using jQuery Bootgrid. The bootgrid is populating fine, the issue is I can't seem to get the icons in front of the top right drop downs. See screen shots attached. I am using bootstrap 4. I believe the jquery bootgrid is having a conflict with the fontawesome, but I can't seem to resolve. I have attached screenshots of what I need and what I have.

chtml snippet -----------------------------------------------------------
    <script>
    var grid = $("#grid-data").bootgrid({
        ajax: false,
        caseSensitive: false,
        columnSelection: true,
        formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\" data-row-id=\"" + row.audience_id + "," + row.client_id + "," + row.audience_name + "," + row.active + "\"><span class=\"fas fa-pencil-alt\"></span></button> " +
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" data-row-id=\"" + row.audience_id + "\"><span class=\"fas fa-trash-alt\"></span></button>";
            },
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        grid.find(".command-edit").on("click", function (e) {
            $("#EditAudience").modal("show");
            var array = $(this).data("row-id").split(',');
            $("#edit_Audience_ID").val(array[0])
            …
1
I tried to add the image from the bootstrap modal window which is a different page to  the main page, but the image won't be added.

Below is the coding from the modal window.
                 						
 <div class="p">
          <div class="thumbnail">
            <div class="thumbnail-img">

          <img src="images/<%=idProduct%>/1.jpg">
            </div> 	
     
        <p><button class="btn add-remove-btn btn-primary" data-identitfier='4'>Add to List</button>
              </p>
      </div> 


  </div>                     
  

Open in new window

0
Hi,I'm having trouble trying to change the bootstrap .active class state via jquery.I've googled and found several solutions but none of them are working for me.Here is my html code:

[code]<section id="hero">
   			<div class="container-fluid">
               <div class="container">
				   <div class="row">
						<div class="col-md-12">
							<nav class="navbar navbar-toggleable-md navbar-light">
							  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown2" aria-controls="navbarNavDropdown2" aria-expanded="false" aria-label="Toggle navigation">
								  <span class="navbar-toggler-icon"></span>
								  <span class="fas fa-times hide" data-wow-delay="2s"></span>
							  </button>
							  <a class="navbar-brand logo" href="index.php"></a>
							  <div class="collapse navbar-collapse" id="navbarNavDropdown2">
								<ul class="navbar-nav ml-auto">
								  <li class="nav-item active">
									<a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
								  </li>
								  <li class="nav-item">
									<a class="nav-link" href="about.php">About Us</a>
								  </li>
								  <li class="nav-item">
									<a class="nav-link" href="howitworks.php">How it Works</a>
								  </li>
								  <?php
								  if( $_SESSION['loggedInUser'] ) { // if user is logged in
								  ?>
							      <li class="nav-item dropdown">
									<a class="nav-link" 

Open in new window

1
I have an website and I want to use bootstrap 4 to make it responsive, if possible.
I have current layout ( see at the bottom) , (example contrived for this question). there is standard header , footer and two column layout.
I have left side menu , which is 200px and next to it is main content div, which has certain width, let's say 800px for the sake of this example.
In addition,  in the main content area, I have several input fields with specific height and width.

Now, if I implement bootstrap in the current layout. how should I do it.
can i  create a row and col layout and put the current content inside these rows.
the side navigation menu has certain width which I would like to maintain , because of the content inside it.
how should i approach this?

<div class=container>
<div class=row>
    <div class= col-3>
         <div  class="site-navigation">side navigation menu</div>
    </div>
   <div class=col-9>
            <div class=site-content">
                .........main content.............
                <input type="text" height="30px" width="160px"/>  
            </div>
    </div>
   </div>
</div>  

------------------------------------------------------------------------------------------------------------------------------------------
.site-content {  width: 800px; }
.site-navigation  {  width: 200px; }

<div class="container">
    <div>Header </div>
    <div  class="site-navigation">side navigation menu</div>
    <div …
0
I have following markup, with everything wrapped in bootstrap container class.
In the main-content section. I have created 3 sections , with each set to float:left, so that they stack up on top of each other.
in the middle div, I want to have a table, such that the table is contained inside its border and any overflow is scrollable. so i have set the overflow property to auto. (see below)
the table is a bootstrap 4 striped table, but table appears or overflows outside the content area, it acually appears outside the main-content area. what am i doing wrong.



<div id="container">
      <div id="header"  style="height:120px"></div>
 
      <div id="main-content">
             <div id="content-header" style="float:left; overflow:auto">
             </div>

              <div id="content" style="float:left">
                   <table class="table table-striped">....
                   </table>
              </div>

              <div id="content-footer" style="float:left">
              </div>
        </div>
 
      <div id="footer" style="height:80px"></div>
</div>
0
Hello Experts,

I need help with Bootstrap 4.1.3 and Javascript/Jquery to make it work the way I would like to do it.  
I follow this user's example: https://github.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar

What I would like to do:
1. How do I get the "arrow" on the submenu to be right-aligned in the uploaded images?  There is a before and an after image.
2. How can I make it so that when I move/hover away from the dropdown menu item, it will collapse.  For example, if I move away from "About Us", the dropdown menu for it, collapse?
3. Finally, I like that you have to click to get the main menu item (i.e Metrics) to expand the dropdown menu.  However, I want it so that when I hover over Submenu, it will expand auotmatically expand.  No clicking, but hovering.

Please provide any assistance for any or all of my wish list.  Thank you.

Here is my code for my menu:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
      <li class="nav-item dropdown">
        <a class="nav-link 

Open in new window

0
OWASP: Avoiding Hacker Tricks
LVL 13
OWASP: Avoiding Hacker Tricks

Learn to build secure applications from the mindset of the hacker and avoid being exploited.

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
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
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

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.