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

Okay, I've got to redo a site that another dev made an attempt at. The previous developer used Twentyfifteen theme to create the site with homepage:

http://uadotcom.staging.wpengine.com/new/

I've created a newer version using the Mundana Theme and Gutenberg blocks. I've created a child theme. This new theme is built with Bootstrap and I'm having a difficult time determining how I'd get that menu to do what I need. I don't use Bootstrap. I've done the sticky menu and adding button before with simple javascript. I think the menu on this new site is tied into Bootstrap somehow.

Where would I even begin to start to get what I need. I tried looking for  scripts in the functions file.

Here's the current page I'm working on:

http://sandbox.intrepidrealist.com/user-acquisition/ 

I need the menu to shrink just a little on scroll, NOT disappear as it does, and then when CTA button in the hero banner is scrolled out of view, then I make it visible in the header.

Where do I start? Sorry for the vagueness! I know diddly about Bootstrap...
0
Introduction to R
LVL 13
Introduction to R

R is considered the predominant language for data scientist and statisticians. Learn how to use R for your own data science projects.

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

    Bootstrap columns are not aligning side by side.  Please see the below reactjs code

  <div className="container-fluid" style={{margin:0,padding:0,height:'auto',minHeight:'100%',minWidth:'100%'}}>
                <div className="row">
                     <div className="col-12 col-sm-12 col-md-7 col-lg-7 col-xl-7" style={{height:'auto'}}>
                         {this.props.children}
                     </div>
                     <div className="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4" style={{color:"#6F7070",
                          height:'auto'}}>
                          <div className='selectable' style={{fontSize: 18}}>
                             <div>
                                 <div style={{fontSize:24, fontWeight:'bold'}}>{record.title}</div>
                                     <div style={{fontSize:12, fontWeight:'bold'}}>Date Created:{date}</div>
                                     <div style={{fontSize:12, fontWeight:'bold',fontStyle:'italic'}}>{record.type}</div>
                                 </div>
                             </div>
                             {fullRecord}
                             <div style={{display:'inline-block',margin:0,padding:0,marginTop:15,marginBottom:10}} className="row">
                                 <span> Details <hr style={{height:3,display:"inline-block",backgroundColor:"#AAC33C",
                                     width:270,verticalAlign:"middle",marginLeft:10}}/>
     

Open in new window

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
Become a CompTIA Certified Healthcare IT Tech
LVL 13
Become a CompTIA Certified Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

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
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
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
Why Diversity in Tech Matters
LVL 13
Why Diversity in Tech Matters

Kesha Williams, certified professional and software developer, explores the imbalance of diversity in the world of technology -- especially when it comes to hiring women. She showcases ways she's making a difference through the Colors of STEM program.

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

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
>