[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

Trying to add a right margin (to my first button) so as to present 2 buttons in a cleaner manner that have a pull-right bootstrap class on them ... the pull right seems to remove all margins is there a way around this?

<a href="rev_logout.php" 	class="btn btn-danger navbar-btn pull-right " 	role="button">Log Out</a>
	   <a href="inventory.php" 	class="btn btn-info navbar-btn pull-right" 		role="button">Home</a>

Open in new window

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

Hi Experts,

I am not able set  fixed width and height for a card image in bootstrap.  I want all in same height and width for all the images.  Please see the below image.

tosend.png
I had tried setting min-width:100% height:40vh and object-fit:cover but not able to resolve this issue.   Please find below the debugger window details

tosend.JPG
Please see the below code

 return (
          <div  key={i.id} className={`card paper ${this.props.selected == i.id ? ' selected': ''}`}
                 style={{width:dimension, height:dimension+50}} onClick={() => this.props.actions.viewItem(i)}>

              {!i?.source?.brand ? null :
               <img src={i.source.brand} className="card-img-top img-fluid "  alt={i.source}/>
              }
              <img src={thumbnail} alt={i.title} className="card-img-top img-fluid" style={{width:"100%!important", 'min-width':"100%",height:"15rem", 'object-fit':'cover'}}/>
            <div className="card-body">
               <p class="card-text"> {i.title} {' '} <span style={{color: '#777'}} > {date} </span></p>
            </div>
         </div>);
         });

Open in new window


Please help me in resolving this issue.

With many thanks,
Bharath AK
0
I am trying to adjust the height of input type in bootstrap 4, which has following sample markup.

is there a quick way to do just the input types?

 <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
0
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
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 am using bootstrap 4 in asp.net web site. how to apply bootstrap dropdown style to asp net controls. for example, asp:dropdown.

<asp:dropdown id="ddl" runat="server" /> .

also, when we use  bootstrap classes to create form and inputs , like below. how to add  vertical space between the inputs ?

<div class="form-control">
   <div class="row">
       <div class="col-6>
            <div class="form-group">
                   <asp:textbox id="txt" runat="server">
              </div>
              ,<div class="form-group">
                     <asp:dropdown .....
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
Hi,

I have a signup form in div tag today. And that is a model open at the bottom of the site.
We have full control of form in that today.
Now this form needs to be submitted to external url.
Now once user submits the form data to be posted in external url.
Once the data is successfully submitted then the external URL will redirect to thankyou page or error page which is configured.
We pass thank you page or error page full url in hidden field.

Please help me how to submit the form in div (model) and the re-direction to success page should open in the same div tag only.

I used iFrame for that. But it is not working well. Please advice.

I have form in subscribeform.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <form action="http://www.externalurl.com">
        <input id="SucccessURL" type="http://www.mysite.com/thankyou" />
        <input id="ErrorURL" type="http://www.mysite.com/erroronSubscribe" />
        First name:<br>
        <input type="text" name="firstname" value="Mickey">
        <br>
        Last name:<br>
        <input type="text" name="lastname" value="Mouse">
        <br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Open in new window



<div class="modal fade" id="news-sign-up" tabindex="-1" role="dialog" aria-labelledby="myModallabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">

                <a class="close" data-dismiss="modal" aria-hidden="true">Close</a>
                <h2>Subscribe</h2>
                <iframe width="100%" height="100%" src="http://localhost:2014/subscribeform.html"></iframe>
            </div>
            <!-- /.modal-content -->
        </div>     
        <!-- /.modal-dialog -->
    </div>
</div>
@Html.Partial("~/Views/Contact/Partial/InvalidCaptcha.cshtml")

Open in new window

0
I'm trying to open a modal and then set the innerHTML of a span, but can't seem to get it working.

The modal is

        Modal::begin([
            //'header'=>'<h4>Add a New Company</h4>',
            //'headerOptions' => ['id' => 'modalHeader'],
            'id'=>'modalPopup',
            'class'=>'modalPopup',
            'size'=>'modal-lg',
            'header' => '<span id="modalHeaderTitle"></span>',
            'headerOptions' => ['id' => 'modalHeader'],
            'closeButton' => [
                'label'=>'Close',
                'id'=>'closeButton',
                'class'=>'btn btn-warning pull-right',
            ],
            'clientOptions' => [
                'backdrop' => 'static', //true,
                'keyboard' => false, // true,
            ]
        ]);
        echo '  <div id="modal-system-messages" style="opacity: 1; display: none"></div>';
        echo "<div id='modalContent'></div>";
        Modal::end();

Open in new window


And then my js for the calling button is

$(function(){
    $('.showModal').click(
        function (){
            //Open the modal window
			$('#modalPopup').modal('show')
				.find('#modalContent')
				.load($(this).attr('value'));
			// Set the modal title span
			// alert($(this).attr('title'));
			$('#modalPopup #modalHeader #modalHeaderTitle').innerhtml = '<h4>' + $(this).attr('title') + '</h4>';
        }
    );
});

Open in new window


I have validated that alert($(this).attr('title')); is returning the proper value but the .innerHTML line does nothing.

Thank you for your help.
0
Hi,
I'm trying to make an image to fit the full height of a div in the body of the page. I'm using master pages.

This is the code in the master page:

<html>
<head runat="server">
    <title></title>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>


</head>
  


<body>
    <form id="form1" runat="server">
        <nav class="navbar navbar-expand-lg  navbar-light bg-primary  fixed-top">
            <a class="navbar-brand" href="#">Navbar</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbar">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Item 1 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Item 2</a>
                    </li>
           

Open in new window

0
Rowby Goren Makes an Impact on Screen and Online
LVL 12
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Here's a screenshot that shows my dilemma:



Notice how my "reviews | shipping & returns | checkout | login" menu is overlapping the company's logo?

Why?

And how can I fix that?

Here's my code:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>Hardwood Timber &amp; Transportation Services | Camden, Tennessee | Admin Page</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!--<link rel="stylesheet" href="css/style.css">-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<style>
	@media (max-width: 766px) {
		
		.company_logo {
			float: none !important;
			margin:auto;
			display:block;
			margin-top:15px;
		}

		.shopping_cart {
			margin:auto;
			display:block;
			margin-bottom:10px;
			background-image:url('images/shopping_cart.png'); 
			background-repeat:no-repeat; 
			width:267px; 
			height:106px;
		}
		
		.company_logo {
			margin-bottom:25px;
		}

		.content {
			max-width:625px; 
			border:1px solid #4f77b3;
			-moz-border-radius: 14px 14px 14px 14px; 
			border-radius: 14px 14px 14px 14px; 
			box-shadow:7px 7px 

Open in new window

0
I need to create a background image on a page that's using Bootstrap. The div that has this image within it is also going to have some dynamic text that will let the user know how many items they have in their Cart.

Not sure how to pull this off...

Here's the way my page looks right now:



The way that it needs to look is this:



Here's my index page:

<body>
<div class="container-fluid" style="overflow:hidden; background-color:#ffffff;">
	<div class="row-fluid">
		<div class="col-md-6 col-sm-6 col-xs-12 company_logo">
			<img src="img/logo.jpg" class="img-responsive company_logo">
		</div>
		<div class="col-md-6 col-sm-6 col-xs-12 shopping_cart">
			hello
		</div>

Open in new window


...and here's my css:

/*
at 575px, you're now in the "col-xs" zone
@media(max-width:767px){} -> XS
@media(min-width:768px){} -> SM
@media(min-width:992px){} -. MD
@media(min-width:1200px){} -> LG
*/

@media(max-width:576px) {

		.company_logo  {
			margin-left:auto;
			margin-right:auto;
			display:block;
			text-align:center;
			background-color:#cccccc;
		}
		
		.shopping_cart {
			float:none !important;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			background-color:#cccccc;
			background-image:url("../img/shopping_cart.png");
			background-repeat:no-repeat;
			width:237px;
			height:106px;
		}

		.content {
			max-width:625px; 
			border:1px solid #4f77b3;
			-moz-border-radius: 14px 14px 14px 14px; 
			

Open in new window

0
what is major difference between

<div class="d-flex flex-row
<div d-flex flex-column

vs regular

<div class="col" and <div class="row"

construct. do we use the flex-row and flex-column construct, similar to bootstrap 3 , or these are for totally different purpose.
0
I have an html page, with header, main content , footer and left hand side menu.
I have used a container class ( shown below in the example). I understand the max-width of the container changes with the size of the device and thus giving it's responsive nature.
but is it possible, to stop this behavior at some minimum width.

right now , if I view my page (sample html below), in a smaller laptop screen, the main content area is stacked below the leftMenu div. I would like to show the leftMenu and main content , side by side all the time, and when screen is too small have a horizontal scroll bars.
how can i achieve this?

<html>
    <div id="header class="container">
    </div>
     <div id="content" class="container">
         <div id="leftMenu">  </div>
         <div id="main content">  </div>
      </div>
      <div id="footer" class="container"></div>
</html>

Open in new window

1
what would css classes look like for the header, mainmenu classes  , if I want to equal space between the li elements in following construct.

also , if mainmenu div appears at the bottom of the header, and is centered, of the header div.

I'm using bootstrap , so I have wrapped everything inside the container class, but I don't want to use navigation classes from bootstrap.

<div class="container">
   <div class="header">
      <div class="mainMenu">
        <ul>
            <li><a>Home</a></li>
            <li><a>About</a></li>
            <li><a>Help</a></li>
         </ul>
      </div>
    </div> ----end of header

     <div>
       ---content----------------------
   </div>
</div>

Open in new window

1
I am new to bootstrap. I have a page set up with a bootstrap grid and form controls  (example below) .
I have two sets of user input controls, applicable in two different scenarios.


if only set of first input controls is applicatble to a user, I would like to hide the second col, and
expand first column to take the full width inside the container?

how can i achieve this  


<div class="container">
  <div class="row">
    <div class="col-sm-6">    
       .... <-- first set of input controls -->
    </div>
    <div class="col-sm-6">
      ... <-- second  set of input controls -->
    </div>  
  </div>
</div>
0
example contrived for this question. I have a dropdown select control as such in my HTML page. I want to give it a slicker look.
for example, at the end of the dropdown, there is an downward arrow.
if i want to change the size, or use a different icon for the downward arrow. How can I do that?

or do i use bootstrap , to create such control. but still I don't know how would i change such icon?


<!DOCTYPE html>
<html>
<body>

<div class="newdropdown">
<select>
    <option value="abc">abc</option>
    <option value="ijk">ijk</option>
    <option value="pqr">pqr</option>
    <option value="xyz">xyz</option>
    </select>
</div>
</body>
</html>
0
I'm utilizing bootstrap 4 to create navigation and dropdown menu for my website.

how can I customize, or override default  color, size of dropdown and navigation menu?
0
<nav style="background-color:#ffffff;" id="quick-tool-nav" class="navbar navbar-expand-lg navbar-light ">
                              <a style="color: black; margin-right: 50%" class="navbar-brand" href="#">Quick Tools</a>
                              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#rbtNavbar" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
                                <span class="navbar-toggler-icon"></span>
                              </button>

 <!-- Tabs -->
						<div class="collapse navbar-collapse active" id="rbtNavbar">
							<ul class="nav navbar-nav">

								<!-- 1st Tab Button -->
								<li class="active">
									<a data-toggle="tab" href="#simple_1">
										<i class="fa fa-heart-o"></i>
										<span>Notes</span>
									</a>
								</li>
                                <li >
									<a data-toggle="tab" href="#simple_2">
										<i class="fa fa-heart-o"></i>
										<span>Activity</span>
									</a>
								</li>
                                   <li >
									<a data-toggle="tab" href="#simple_3">
										<i class="fa fa-heart-o"></i>
										<span>Email</span>
									</a>
								</li>
                                

								

							</ul> <!-- /.nav.navbar-nav -->
						</div> <!-- /Tabs -->
                    </nav>

Open in new window



anyone see why my nav looks like this ?

nav
0
CompTIA Cloud+
LVL 12
CompTIA Cloud+

The CompTIA Cloud+ Basic training course will teach you about cloud concepts and models, data storage, networking, and network infrastructure.

Hi,

I have a regular css bootstrap Modal looking like this:

 <!-- modal default -->
                <div id="myModal2" aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" role="dialog" tabindex="-1">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">&times;</span></button>
                                <h4 id="myModalLabel" class="modal-title">Modal title</h4>
                            </div>
                            <div class="modal-body">
                                <p>Aliquam erat volutpat. Proin lacus erat, aliquam id efficitur sit amet, mattis vel urna. Pellentesque malesuada turpis vitae vestibulum facilisis. Aliquam vehicula felis vel justo consectetur, quis volutpat tellus consequat. Aliquam tellus lacus, eleifend at leo vitae, imperdiet cursus ex. Sed sodales augue euismod felis auctor auctor. Suspendisse sodales fermentum dolor sed mattis. Ut ipsum nunc, volutpat non velit a, tristique tempor mauris. Duis ac finibus lectus. Cras blandit eros ac diam luctus mattis. Nam dignissim mattis blandit. Nulla facilisi. Nullam non massa ac mauris efficitur congue aliquet ut orci.</p>
                                <p>Maecenas volutpat, massa rhoncus eleifend sagittis, sem nulla mollis ante, non porta 

Open in new window

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
Twp questions on this page: https://www.gopherstateevents.com/results/cc_rslts/cc_rslts.asp

1) Why is there so much space above and below the horizontal list beginning with "Awards" and how can I minimize that?
2) If I used a data table for the Individual Results, would that increase, decrease, or have no impact on load time?

Thank you!
0
After successfully inserting a record using the try,,catch.., I 'd like to use a bootstrap call to display the message as shown below.
     try
                {
                    // Do something
                    AppThis.InsertUpdateProduct();
             
            // I'd like to display the message calling a bootstrap alert  saying "Successfully added!"
                     
                }
                catch (Exception ex)
                {
                    // Log 
                    string strErrNum = ex.Message.ToString();

                    // Display message to users

                }

Open in new window

0
I created a search engine and is displaying results from the  database and beneath the results is a bootstrap modal for which am displaying some selected results in there
Problem is that i want to for each results fetched eg row 1 of id 1 should displayed the contents for id 1 and not any other but here in this if  3 results is found, it displays the 3rd  results for all which shouldn't be the case.
Beneath is an images that shows the above...Any help to solve this is highly appreciated.




<?php
$button = $_GET [ 'submit' ];
$search = $_GET [ 'search' ];
if( !$button )
          echo "you didn't submit a keyword";
else {
    if( strlen( $search ) <= 1 )
            echo "Search term too short";
            else { echo "You searched for <b> $search </b> <hr size='1' > </ br > ";
            $conn = mysqli_connect( "localhost","root","",'register') ;
            $search_exploded = explode ( " ", $search );
            $x = 0;
            foreach( $search_exploded as $search_each ) {
                  $x++; $construct = "";
                  if( $x == 1 )
					  
                      	$construct .="keyword LIKE '%$search_each%' OR qualifications1 LIKE '%$search_each%' OR dept LIKE '%$search_each%' ";
                           else
					   	$construct .="AND keyword LIKE '%$search_each%' OR AND qualifications1 LIKE '%$search_each%' OR AND dept LIKE '%$search_each%' ";
				
          }
          $construct = " SELECT * FROM users WHERE $construct ";
          $run

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

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
>