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

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

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

I am using React Bootstrap and have a hero section with big text and an image. It doesn't seem by default that text is responsive. I have done it with the image using a class of 'img-fluid'.

Regarding the text, I found a really easy way to make the text responsive but it seems like a 'too good to be true' way so could anyone please tell me why it would be a bad idea to do this and what would be a better alternative?

h1 {
  font-size: 8vw;
}

Open in new window

0
Can ngtypeahead be used along with angularJS?? Does it support multiselect feature
0
I need to create a table in my html page &  background color should be yellow. I created a div tag with background color yellow but whenever there is data in the table it is getting the default color of bootstrap table class. How do i create a table with yellow background & has same format as bootstrap table class Here is the html code

<div class="col col-md-12 form-control" style="border-style: solid; overflow-y: auto; -ms-overflow-style: -ms-autohiding-scrollbar; border-width: thin; border-color: #F1DB0B; background-color: #F8F2BB; vertical-align: middle; height: 175px">
  <table id="Grid" class="table table-hover" >
    <thead id="GridHeader">
    <tr id="GridHeaderRow" >
      <th id="ConfigID" class="col-md-6 " scope="col">ID</th>
      <th id="ConfigName" class="col-md-6 " scope="col">Name</th>
    </tr>
    </thead>
    <tbody id="Body">
    <tr data-ng-repeat="ConfigID in ConfigIDs">
      <td id="ID" class="configTextFont">{{ConfigID.ID}}</td>
      <td id="Name" class="configTextFont">{{ConfigID.Name}}</td>
    </tr>
    </tbody>
  </table>
</div>

Open in new window

0
Hi everyone,

I have a section of bootstrap code that I would like to appear differently on an iPad pro in portrait mode. The code can be seen here:

https://codepen.io/gwnh/pen/a9a80e51099352cf6622d974c47648e2?editors=1010

In desktop view, the image is placed in a column on the left, while the text is on the right. On an iPad Pro in portrait view, I'd like the image to appear above the text on the left and take up 12 columns on the bootstrap grid, while the text section would appear beneath the image.

Is it possible to do this with bootstrap or would I have to write a media query?

Would really appreciate any assistance.
0
<style>

#html-builder-navbar div, #html-builder-navbar ul, #html-builder-navbar ul li a){
    height:100% !important;
    margin:0;
    padding:0;
}
#html-builder-navbar .dropdown-menu{
    height:auto !important;
}
#html-builder-navbar .row{
    border:none !important;
}
.bg-nav-item {
    background-color: #edeef2!important;
}
.bg-save {
    background-color: #17c671!important;
}
.bg-main{
    background-color: #525d7d!important;
}
.text-main {
    color: #525d7d!important;
}
.text-white {
    color: #fff !important;
}
.font-weight-light {
    font-weight: 450 !important;
}
.font-weight-main {
    font-weight: 600 !important;
}
</style>
<div id="html-builder-navbar" class="header-navbar collapse d-lg-flex p-0 bg-white border-top not-editable">
            <div class="container-fluid m-0 p-0">
              <div class="row mw-100">
                <div class="col m-0 p-0">
                  <ul class="nav nav-tabs border-0 flex-column flex-lg-row p-0 m-0">
                    <li class="nav-item bg-nav-item">
                      <a href="#" class="nav-link p-4 m-0"><i class="fa fa-arrow-left text-main"></i></a>
                    </li>
                    <li class="nav-item">
                      <a  class="nav-link p-4 text-main font-weight-main m-0">Happy Markerter Template</a>
                    </li>
                    <li class="nav-item dropdown bg-nav-item">
                      <a class="nav-link p-4 m-0" data-toggle="dropdown"><i class="fa fa-cog 

Open in new window

0
I had gutters between the tiles on my page, then I made an unrelated update to the color of the footer links and now they're gone. I'm not using no-gutters on the containing row -- what's gone awry? [Edit: They've disappeared on columns I'm just using .col-x-x on too, not just the class on which I've used extended. This is with Bootstrap 4.3.1. I'm not sure I've ever noticed this before, but the Bootstrap docs say "Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row" but the samples on the grid page at https://getbootstrap.com/docs/4.0/layout/grid/ are all gutterless regardless of using the .no-gutters class.]

This is what it used to look like:
This is what it used to look like
And this is what it looks like now:
And this is what it looks like now

<div class="container">
<div class="row">
		
	
	

<div class="state-chart-container">		
	<div class="state-chart">
		<h2 class="infrastructure">Land in Conservation</h2>
		
			<div class="state-chart-content bg-informational">
				<h1><a href="#" data-toggle="modal" role="button" data-target="#land-in-conservationModal"> 2%</a></h1>
			</div>
		
	</div><!-- /.chart -->
</div><!-- /.chart-container -->

	
	
	
<div class="state-chart-container">
	<div class="state-chart">
		<h2 class="infrastructure">Population</h2>
		
			<div class="state-chart-content bg-informational">
				
						
				<h1><a href="#" 

Open in new window

0
I have a bootstrap popover which has 2 buttons Yes or No. Based on the response from the user i need to call AngularJS service function. How do i do that??

Popover is created only if it meets a certain criteria (like existence of duplicate records)

    <script>
        
        $(document).ready(function () {
            if (DuplicateRecord) {
                $('[data-toggle="popover"]').popover();
            }
            });
       
    </script>

Open in new window


HTML code looks something like this but currently doesn't have 2 buttons & still need to work on it

 <button href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" data-trigger="click" data-html="false" data-placement="left">Toggle popover</button>

Open in new window

0
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
CompTIA Security+
LVL 19
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

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
    <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
Microsoft Azure 2017
LVL 19
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 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

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
>