I'm trying to make a 2 columns layout with bootstrap 4.5
It should display as 2 columns when seen on larger display, then in smaller display the different divs should be stacked in 1 column. I followed the "Nesting columns" section of this example: https://getbootstrap.com/2.3.2/scaffolding.html
This is my aspx code:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="MainPage.aspx.vb" Inherits="Efesto_2.MainPage" ValidateRequest="false" Culture="it-IT" UICulture="it-IT" MaintainScrollPositionOnPostback="true" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Efesto</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="Content/bootstrap.css" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico" />
<script src="Scripts/jquery-3.5.1.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="Content/fontawesome-all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<script type="text/javascript">
function ShowPopup() {
$("#btnShowPopup").click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ToolkitScriptManager1" runat="server" EnableScriptGlobalization="true" EnableScriptLocalization="true" EnablePartialRendering="false"></asp:ScriptManager>
<nav class="navbar navbar-expand-md navbar-light fixed-top text-white">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="MainPage.aspx" runat="server" id="MenuHome">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="Clienti.aspx" runat="server" id="MenuClienti">Clienti</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuChiamate" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Chiamate
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="RichiesteEmail.aspx">Richieste Email</a>
<asp:LinkButton class="dropdown-item" runat="server" ID="lnkNuovaChiamata" UseSubmitBehavior="false" OnClientClick="javascript:window.open('chiamata.aspx?RFRic=0&id=0&azione=inserisci','_blank','left=20,top=20,width=620,height=700,status=no, menubar=no, toolbar=no,scrollbars=yes,resizable=1');">INSERISCI NUOVA</asp:LinkButton>
<a class="dropdown-item" href="ElencoChiamate.aspx">Elenco chiamate</a>
<a class="dropdown-item" href="kanban.aspx">Attività</a>
<a class="dropdown-item" href="Interventi.aspx">Interventi</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuMagazzino" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Magazzino
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="GestioneProdotti.aspx">Gestione prodotti</a>
<%--<asp:LinkButton runat="server" ID="LinkButton1" UseSubmitBehavior="false" OnClientClick="javascript:window.open('chiamata.aspx?RFRic=0&id=0&azione=inserisci','_blank','left=20,top=20,width=620,height=700,status=no, menubar=no, toolbar=no,scrollbars=yes,resizable=1');">INSERISCI NUOVA</asp:LinkButton>
<a class="dropdown-item" href="ElencoChiamate.aspx">Elenco chiamate</a>
<a class="dropdown-item" href="kanban.aspx">Attività</a>
<a class="dropdown-item" href="Interventi.aspx">Interventi</a>--%>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="VulcanoPage.aspx">Vulcano</a>
</li>
<li class="nav-item">
<asp:LinkButton class="nav-link" Text="Logout" runat="server" ID="btnLogout" OnClick="btnLogout_Click" />
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="MenuStrumenti" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-right: 8em;">Strumenti
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ModuloServizi.aspx" target="_blank">Modulo Servizi</a>
</div>
</li>
</ul>
<%--<form class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>--%>
</div>
</nav>
<div class="alert alert-danger alert-dismissible" runat="server" id="divAlert" style="display: none;">
×
<asp:Label runat="server" ID="lblAlertTitolo" Font-Bold="true"></asp:Label><br />
<asp:Label runat="server" ID="lblAlertMessaggio"></asp:Label>
</div>
<asp:UpdatePanel runat="server" ID="UpdatePanel1" UpdateMode="conditional">
<ContentTemplate>
<div style="padding: 2rem; padding-top: 6rem;">
<div class="row">
<div class="span9">
<div class="col9">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Chiamate giorno</h4>
</div>
<div class="card-body">
<div>
<asp:TextBox runat="server" ID="txtData" Type="date" ToolTip="Data" required="required" AutoPostBack="true" autocomplete="off"></asp:TextBox>
<asp:DropDownList ID="ddlUtenti" runat="server" AppendDataBoundItems="true" CssClass="tendina tendina-auto" ToolTip="Scegli tecnico" AutoPostBack="true" OnSelectedIndexChanged="ddlUtenti_SelectedIndexChanged">
<asp:ListItem Value="-1">Tutti</asp:ListItem>
</asp:DropDownList>
</div>
<br />
<div class="content">
<div id="divChiamateGiorno" class="scrollDiv">
<asp:GridView ID="grdChiamateGiorno" runat="server" AutoGenerateColumns="False" DataKeyNames="idchia,dalle,alle,idstato" DataSourceID="SqlChiamateGiorno" AllowSorting="True" CssClass="tablestyle">
<AlternatingRowStyle BackColor="WhiteSmoke" CssClass="altrowstyle altezzaMinima" Height="50px" Width="100%" />
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<HeaderStyle Font-Bold="True" BackColor="LightGray" HorizontalAlign="Center" VerticalAlign="Middle" Height="30px" CssClass="headerstyle" />
<RowStyle CssClass="rowstyle altezzaMinima" Height="50px" />
<Columns>
<asp:BoundField DataField="tecnico" HeaderText="Tecnico" SortExpression="tecnico" />
<asp:BoundField DataField="ragsoc" HeaderText="Cliente" SortExpression="ragsoc" ItemStyle-Width="30%" />
<asp:BoundField DataField="rdescr" HeaderText="Richiesta" SortExpression="rdescr" ItemStyle-Width="50%" />
<asp:BoundField DataField="prior" HeaderText="Priorità" SortExpression="prior" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="app" HeaderText="Appuntamento" SortExpression="app" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="assremota" HeaderText="Remoto" SortExpression="assremota" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Classif" HeaderText="Class." SortExpression="Classif" ItemStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="idchia" HeaderText="idchia" InsertVisible="False" ReadOnly="True" SortExpression="idchia" Visible="false" />
<asp:BoundField DataField="tipo" HeaderText="tipo" SortExpression="tipo" Visible="false" />
<asp:BoundField DataField="rforo" HeaderText="rforo" SortExpression="rforo" Visible="false" />
<asp:BoundField DataField="dalle" HeaderText="dalle" SortExpression="dalle" Visible="false" />
<asp:BoundField DataField="alle" HeaderText="alle" SortExpression="alle" Visible="false" />
<asp:BoundField DataField="idstato" HeaderText="idstato" SortExpression="idstato" Visible="false" />
<asp:BoundField DataField="Bloccato" HeaderText="Bloccato" SortExpression="Bloccato" ItemStyle-HorizontalAlign="Center">
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:TemplateField HeaderText="" ItemStyle-Width="5%">
<ItemTemplate>
<div class="tooltip">
<i id="collapse3" runat="server" class="fa fa-caret-square-o-left fa-lg" aria-hidden="true"></i>
<span class="tooltiptext" style="width: 170px;" id="litGestioneGiorn" runat="server"></span>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlChiamateGiorno" runat="server" ConnectionString="<%$ ConnectionStrings:dbVulcanoConnectionString %>" SelectCommand="select utenti.nome as tecnico, Richieste.IDRic as idchia, richieste.descr as rdescr, ISNULL(richieste.assistremota,0) as assremota, Clienti.RagSociale as ragsoc, richieste.descr as descr, richieste.priorita as prior, richieste.tipo as tipo, richieste.rforologio as rforo, ISNULL(statoric.appuntamento,0) as app, ISNULL(statoric.oradalle,0) as dalle, ISNULL(statoric.oraalle,0) as alle, statoric.ID as idstato, left(isnull(Clienti.punta,''),2) as classif, right(left(isnull(Clienti.punta,''),3),1) as Bloccato from clienti inner join richieste on clienti.idcliente = richieste.rfcliente inner join statoric on statoric.rfric = richieste.idric inner join stati on stati.idstato = statoric.rfstato inner join utenti on utenti.idutente=statoric.rftecnico where statoric.attuale = 1 and (statoric.rfstato < 14 or statoric.rfstato=41) and statoric.dataass = #data and (#tecnico = -1 or statoric.rftecnico = #tecnico) order by app desc, oraalle asc, prior desc"><%--statoric.dataass between #data and coalesce(#data2, #data)--%>
<SelectParameters>
<asp:ControlParameter ControlID="txtData" DefaultValue="17/01/2017" Name="data" PropertyName="Text" Type="DateTime" />
<asp:ControlParameter ControlID="ddlUtenti" DefaultValue="0" Name="tecnico" PropertyName="SelectedValue" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<p>
</p>
<table border="0" cellspacing="0" cellpadding="0" style="width: 100%">
<tr>
<td></td>
<td align="right">
<asp:Button runat="server" name="Stampa" type="button" class="gbutton" ID="btnStampa" Text="Stampa" />
<%--onclick="printdiv('divChiamateGiorno');" --%>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Calendario</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="span3">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Consuntivazione rapida</h4>
</div>
<div class="card-body">
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Chiamate aperte</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
<div class="row" style="padding-top: 1rem;">
<div class="col-12">
<div class="card">
<div class="card-header">
<i class="fa fa-id-card fa-2x fa-pull-left"></i>
<h4 class="card-title">Attività</h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
<%-- PER APRIRE I MENU DELLA NAVBAR SUL MOUSEOVER --%>
<script type="text/javascript">
$(document).ready(function () {
$(".dropdown, .btn-group").hover(function () {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
dropdownMenu.parent().toggleClass("open");
}
});
});
</script>
<script>
function chiudiAlert() {
__doPostBack('chiudiAlert');
}
</script>
and this is what I get:
and this what I want:
Ok I ended up using container-fluid and col-lg
Related
I am new to Node.js. I try to learn Node.js and make a simple blog based on the Node.js that I learn. I face a problem in my coding as my node.js syntax is not functioning. I have a coding error in index.ejs, and I can't seem to connect to MongoDB until I fix it. I tried to find a solution to this problem, but I can't seem to fix it. Here is my code in index.ejs. A little help would be appreciated. Thank you.
<!DOCTYPE html>
<html lang="en">
<%- include('layouts/header'); -%>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.1.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<%include('layouts/navbar'); ->
<!-- Page Header-->
<header class="masthead" style="background-image: url('assets/img/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content-->
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Man must explore, and this is exploration at its greatest</h2>
<h3 class="post-subtitle">Problems look mighty small from 150 miles up</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on September 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<h2 class="post-title">I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.</h2>
<p class="post-meta">
Posted by
Start Bootstrap
on September 18, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Science has not yet mastered prophecy</h2>
<h3 class="post-subtitle">We predict too much for the next year and yet far too little for the next ten.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on August 24, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Post preview-->
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">Failure is not an option</h2>
<h3 class="post-subtitle">Many say exploration is part of our destiny, but it’s actually our duty to future generations.</h3>
</a>
<p class="post-meta">
Posted by
Start Bootstrap
on July 8, 2022
</p>
</div>
<!-- Divider-->
<hr class="my-4" />
<!-- Pager-->
<div class="d-flex justify-content-end mb-4"><a class="btn btn-primary text-uppercase" href="#!">Older Posts →</a></div>
</div>
</div>
</div>
<!-- Footer-->
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2022</div>
</div>
</div>
</div>
<%- include('layouts/footer'): -%>
<%- include('layouts/scripts'); -%>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
enter image description here
I'm trying to get bootstrap tabs to work, but I'm having trouble. When I click on the tab, it doesn't show the right content. Here's my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
before the
<ul class="nav nav-tabs MentorProfile_Tabs">
<li class="active nav-link"><a data-toggle="tab" href="#experience">Experience</a></li>
<li class="nav-link"><a data-toggle="tab" href="#reviews">Reviews {{numReviews}}</a></li>
</ul>
<div class="tab-content">
<div id="experience" class="tab-pane fade in active" role="tabpanel">
{{#experience}}
<div class="row MentorProfile_ExperienceItem">
<div class="col-md-2"></div>
<div class="col-md-7">
<p class="MentorProfile_ExperienceItemTitle">{{title}}</p>
<p class="MentorProfile_ExperienceItemCompany">{{company}}</p>
</div>
<div class="col-md-3">
<p class="MentorProfile_ExperienceItemDate">{{dateString}}</p>
</div>
</div>
{{/experience}}
</div>
<div id="reviews" class="tab-pane fade" role="tabpanel">
<div class="row MentorProfile_Reviews">
{{#reviews}}
<div class="row MentorProfile_Review">
<div class="row">
<div class="col-sm-8 MentorProfile_Reviews_UserName">{{firstName}} {{lastName}}</div>
<div class="col-md-4">{{{ratingHtml}}}</div>
</div>
<div class="row MentorProfile_Reviews_UserReview">
{{review}}
</div>
</div>
{{/reviews}}
{{^reviews}}
<div class="row MentorProfile_Review">There are no reviews for this mentor at this time.</div>
{{/reviews}}
</div>
</div>
</div>
The way bootstrap 5 tabs works little bit different.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
I am new to web devolopment, i want to add carousel in my project so i have copied this basic template from bootstrap docs, in desktop view it working but in mobile view it showing a unwanted black space and captions missing, please some one help
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<section class="home">
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{% static 'img/slide-1.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-2.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="{% static 'img/slide-3.jpg' %}" class="d-block w-100 h-auto" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
</body>
</html>
custom.css
.carousel-item {
height: 24rem;
background: #000;
}
.carousel-item>img {
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: 100%;
opacity: 0.5;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption{
bottom: 25%;
}
.carousel-caption h5{
font-size: 30px;
margin-bottom: 20px;
}
.carousel-caption p{
font-size: 20px;
}
To make testing easier i added some grey color to the background (you can remove it later).
What I think you are missing, is to add the Bootstrap scripts, you can see the code for an example.
Here you have how to do it, from Bootstrap documentation.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
>>>>>>>>>> SCRIPTS HERE <<<<<<<<<<<<<
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
>>>>>>>>>>> UP HERE <<<<<<<<<<<<<<<<<
<title></title>
</head>
<body style="background-color: gray">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="IMAGE 1">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 2">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="IMAGE 3">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</body>
</html>
Regarding your question about "where" to put the text, after the images will be ok.
Here you have a working example (from one of my portfolio projects):
<!-- Testimonials -->
<section id="testimonials" class="colored-section">
<div id="testimonials-carousel" class="carousel slide" data-ride="false">
<div class="carousel-inner">
<div class="carousel-item active container-fluid">
<h2 class="testimonial-text">I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img class="testimonial-image" src="images/dog-img.jpg" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item container-fluid">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img class="testimonial-image" src="images/lady-img.jpg" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<a class="carousel-control-prev" href="#testimonials-carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#testimonials-carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</section>
</html>
Please, mark the answer as accepted ;)
below things worked for me
<div class="carousel-caption d-block">
Instead of
<div class="carousel-caption d-none d-md-block">
read here display properties
I have installed tomcat-8.5.23 in Linux and it is running fine. I have tried running the curl command as below, and it is resulting in the output. Where as i am trying to access the url(http://hostIp:8181/) from internet explorer resulting in timeout error.
$curl http://hostIp:8080/
output:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Apache Tomcat/8.5.23</title>
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="tomcat.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="navigation" class="curved container">
<span id="nav-home">Home</span>
<span id="nav-hosts">Documentation</span>
<span id="nav-config">Configuration</span>
<span id="nav-examples">Examples</span>
<span id="nav-wiki">Wiki</span>
<span id="nav-lists">Mailing Lists</span>
<span id="nav-help">Find Help</span>
<br class="separator" />
</div>
<div id="asf-box">
<h1>Apache Tomcat/8.5.23</h1>
</div>
<div id="upper" class="curved container">
<div id="congrats" class="curved container">
<h2>If you're seeing this, you've successfully installed Tomcat. Congratulations!</h2>
</div>
<div id="notice">
<img src="tomcat.png" alt="[tomcat logo]" />
<div id="tasks">
<h3>Recommended Reading:</h3>
<h4>Security Considerations HOW-TO</h4>
<h4>Manager Application HOW-TO</h4>
<h4>Clustering/Session Replication HOW-TO</h4>
</div>
</div>
<div id="actions">
<div class="button">
<a class="container shadow" href="/manager/status"><span>Server Status</span></a>
</div>
<div class="button">
<a class="container shadow" href="/manager/html"><span>Manager App</span></a>
</div>
<div class="button">
<a class="container shadow" href="/host-manager/html"><span>Host Manager</span></a>
</div>
</div>
<!--
<br class="separator" />
-->
<br class="separator" />
</div>
<div id="middle" class="curved container">
<h3>Developer Quick Start</h3>
<div class="col25">
<div class="container">
<p>Tomcat Setup</p>
<p>First Web Application</p>
</div>
</div>
<div class="col25">
<div class="container">
<p>Realms & AAA</p>
<p>JDBC DataSources</p>
</div>
</div>
<div class="col25">
<div class="container">
<p>Examples</p>
</div>
</div>
<div class="col25">
<div class="container">
<p>Servlet Specifications</p>
<p>Tomcat Versions</p>
</div>
</div>
<br class="separator" />
</div>
<div id="lower">
<div id="low-manage" class="">
<div class="curved container">
<h3>Managing Tomcat</h3>
<p>For security, access to the manager webapp is restricted.
Users are defined in:</p>
<pre>$CATALINA_HOME/conf/tomcat-users.xml</pre>
<p>In Tomcat 8.5 access to the manager application is split between
different users. Read more...</p>
<br />
<h4>Release Notes</h4>
<h4>Changelog</h4>
<h4>Migration Guide</h4>
<h4>Security Notices</h4>
</div>
</div>
<div id="low-docs" class="">
<div class="curved container">
<h3>Documentation</h3>
<h4>Tomcat 8.5 Documentation</h4>
<h4>Tomcat 8.5 Configuration</h4>
<h4>Tomcat Wiki</h4>
<p>Find additional important configuration information in:</p>
<pre>$CATALINA_HOME/RUNNING.txt</pre>
<p>Developers may be interested in:</p>
<ul>
<li>Tomcat 8.5 Bug Database</li>
<li>Tomcat 8.5 JavaDocs</li>
<li>Tomcat 8.5 SVN Repository</li>
</ul>
</div>
</div>
<div id="low-help" class="">
<div class="curved container">
<h3>Getting Help</h3>
<h4>FAQ and Mailing Lists</h4>
<p>The following mailing lists are available:</p>
<ul>
<li id="list-announce"><strong>tomcat-announce<br />
Important announcements, releases, security vulnerability notifications. (Low volume).</strong>
</li>
<li>tomcat-users<br />
User support and discussion
</li>
<li>taglibs-user<br />
User support and discussion for Apache Taglibs
</li>
<li>tomcat-dev<br />
Development mailing list, including commit messages
</li>
</ul>
</div>
</div>
<br class="separator" />
</div>
<div id="footer" class="curved container">
<div class="col20">
<div class="container">
<h4>Other Downloads</h4>
<ul>
<li>Tomcat Connectors</li>
<li>Tomcat Native</li>
<li>Taglibs</li>
<li>Deployer</li>
</ul>
</div>
</div>
<div class="col20">
<div class="container">
<h4>Other Documentation</h4>
<ul>
<li>Tomcat Connectors</li>
<li>mod_jk Documentation</li>
<li>Tomcat Native</li>
<li>Deployer</li>
</ul>
</div>
</div>
<div class="col20">
<div class="container">
<h4>Get Involved</h4>
<ul>
<li>Overview</li>
<li>SVN Repositories</li>
<li>Mailing Lists</li>
<li>Wiki</li>
</ul>
</div>
</div>
<div class="col20">
<div class="container">
<h4>Miscellaneous</h4>
<ul>
<li>Contact</li>
<li>Legal</li>
<li>Sponsorship</li>
<li>Thanks</li>
</ul>
</div>
</div>
<div class="col20">
<div class="container">
<h4>Apache Software Foundation</h4>
<ul>
<li>Who We Are</li>
<li>Heritage</li>
<li>Apache Home</li>
<li>Resources</li>
</ul>
</div>
</div>
<br class="separator" />
</div>
<p class="copyright">Copyright ©1999-2017 Apache Software Foundation. All Rights Reserved</p>
</div>
</body>
</html>
Below is the error message i am getting in accessing the url from the internet explorer.
This site can’t be reached
<hostip> took too long to respond.
Search Google for <hostip> 8181
ERR_CONNECTION_TIMED_OUT`enter code here`
Could you please help me what went wrong here? Thanks in advance.
Regards,
Balakrishna K
I have following html code and it gives me a page like attached screen shot. I wanted to fix the search glyphicon to be at the right end corner along with the search box.
Code here:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="../css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Hello World</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Welcome</li>
<li>Login</li>
<li>Signup</li>
<li>
<form class="navbar-form" role="search"> <li>
<input type="text" class="form-control" placeholder="Search"></li>
<li>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button></li>
</form>
<li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<form>
<fieldset class='textbox' style="padding:10px">
<input style="margin-top: 8px" type="text" placeholder="Username" /><br/>
<input style="margin-top: 8px" type="password" placeholder="Passsword" /><br/><br/>
<input class="btn btn-primary" name="commit" type="submit" value="Log In" />
</fieldset>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
Can someone help to resolve this?
Thanks
Use form-group..
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</form>
Demo: http://bootply.com/78702