I am trying to use bootstrap 5.1 to achieve a responsive layout, but don't get the expected outcome.
I have two columns I want to be adjacent in large screens and stacked in small screens. The first column is further subdivided by two (nested) columns; one with the title and one with three buttons. I would like these to stack in large screens (i.e. buttons below title) and position adjacent in small screens (i.e. buttons next to title).
Instead, the nested columns always stack. What am I doing wrong?
fiddle: fiddle
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>TITLE</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="hidden-sm col-md-1 col-lg-2"></div>
<div class="col-sm-12 col-md-10 col-lg-8">
<div class="row">
<div class="col-xs-12 col-sm-5">
<div class="row">
<div class="col-xs-6 col-sm-12">
<h4>TITLE</h4>
</div>
<div class="col-xs-6 col-sm-12">
<button type="button" class="btn active btn-danger btn-block">1</button>
<button type="button" class="btn active btn-success btn-block">2</button>
<button type="button" class="btn active btn-danger btn-block">3</button>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-7">
<div id="clock" style="background-color:black; height:5rem;">   </div>
</div>
<div class="hidden-sm col-md-1"></div>
</div>
</div>
</div>
</div>
<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>
</body>
</html>
Related
What is the issue, Where did I go wrong? This is the code for index.ejs i made minor changes to my previous old_index.ejs. i have been struggling with this issue and the backend does have await function for calling aleph-js (aleph.im) so i don't think it's any issue about async.
**strong text**<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-3 rooms-sidebar">
<div class="card no-outline">
<div class="card-body">
<small>Logged in as</small><br>
<b>
hook this up later<br>
</b>
</div>
</div>
<hr>
<hr>
<div class="card no-outline mb-2 room-card">
<div class="card-body">
<span class='name'>
Chat
</span><br>
<span class='member-count'>
<small>
99 Members
</small>
</span>
</div>
</div>
</div>
<div class="col-9">
<div class="chat-room">
<nav class="navbar navbar-light">
<span class="navbar-brand" href="#">
<b>
Chat
</b>
</span>
<small>
99 Members
</small>
</nav>
<div id="messages">
<% posts.forEach((post)=> { %>
<% var parsed_item=JSON.parse(post.item_content) %>
<div class="message mb-2">
<div class="content-container">
<div class="content">
<%= parsed_item.content.body %>
</div>
<div class="author">
<%= parsed_item.address %>
</div>
</div>
</div>
<% }) %>
</div>
<div class="chat-box">
<form action="/messages" method="post" id='message-form'>
<div class="input-group">
<input type='text' name="message" id="message" cols="30" rows="10" class="form-control">
<div class="input-group-append"></div>
<input type="submit" value="Post Message" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<%= posts %>
<script type='text/javascript'>
$(document).ready(() => {
const socket = new WebSocket('wss://api2.aleph.im/api/ws0/messages?msgType=POST&contentType=chat')
socket.onmessage = (e) => {
let message = JSON.parse(e.data)
console.log(message)
let content = message.content.content.body;
$('#messages-list').prepend(`<li>${content}</li>`)
}
$('#message-form').submit((e) => {
e.preventDefault();
$.post('/messages', $('#message-form').serialize())
$('#message-form textarea').val('')
})
})
</script>
</body>
</html>
<%= 'me' if message.user == current_user %>
Refer The Image
I am making a discord bot with website, and i have defined css and other stuff in .html file but its still not showing when i go to the website.
res.status(200).sendFile(path.resolve(__dirname, "../../website/command.html"))
})
Thats how i require the html file.
The Html File:
<html lang="en-US">
<head>
<title>Commandli</title>
<link rel="icon" href="https://cdn.discordapp.com/avatars/746706292562853888/0b578635739cbd7e5b076e65f2c04a4c.png?size=2048">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/commands.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<header class="header">
<img src="https://cdn.discordapp.com/avatars/"/> bot
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
<ul class="menu">
<li>Home</li>
<li><a class="active" href="commands.html">Commands</a></li>
<li>About us</li>
<li>Contact us</li>
<li>Invite bot</li>
</ul>
</header>
<main>
<section class="tabs">
<div class="tab-header">
<div class="tablink tab-active" onclick="openCity(event,'Utility')">Utility</div>
<div class="tablink " onclick="openCity(event,'Fun')">Fun</div>
<div class="tablink" onclick="openCity(event,'Economy')">Economy</div>
<div class="tablink" onclick="openCity(event,'Info')">Info</div>
<div class="tablink" onclick="openCity(event,'Games')">Games</div>
<div class="tablink" onclick="openCity(event,'Misc')">Misc</div>
<div class="tablink" onclick="openCity(event,'All commands')">All commands</div>
</div>
<div style="margin-left:130px">
<div id="Utility" class="tab-content category" style="display:block">
<p><a>Utility commnads</a><br>Those commands help you with some things</p>
<p><a>=dungeon</a><br>Sends information about the current dungeon.</p>
<p><a>=help</a><br>Sends help!</p>
<p><a>=gamepedia</a><br>Search what you want on gamepedia</p>
<p><a>=welcome info</a><br>Information about the welcome system</p>
<p><a>Soon more!</a><br>Stay tuned!</p>
</div>
</div>
<script type="text/javascript" src="../js/commands.js"></script>
</section>
</main>
</body>
</html>
HTML file in bin = https://sourceb.in/DEA1wBlvs2
(Had to remove some code because it was huge)
I have basic code which works as:
$voice = new COM("SAPI.SpVoice");
voice .Speak("hello world");
I am getting RID of default voice, So
I am now looking at a way to change which voice is getting used for the TTS.
I want to change SAPI voice to ZIRA
What is the correct way to change the default voice, I read some thread here , But it is in javascript, and it is not working.
my code :
#$submit = $_POST['process'];
#$word = $_POST['texttospeech'];
$voice = new COM("SAPI.SpVoice");
if($_SERVER["REQUEST_METHOD"] == "POST" and isset($submit) and !empty($word)){
$voice->Speak($word);
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<title>PHP Text to Speech</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/fav.png" type="image/png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body onload="startTime()">
<nav class="navbar-inverse" role="navigation">
<a href="https://google.com/" target="_blank">
<img src="img/cod.png" class="hederimg">
</a>
<div id="clockdate">
<div class="clockdate-wrapper">
<div id="clock"></div>
<div id="date"><?php echo date('l, F j, Y'); ?></div>
</div>
</div>
</nav>
<div class="topmost">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<center>
<strong class="panelinputtitle">PHP Text to Speech Converter Using Microsoft Speech API</strong>
</center>
</div>
<div class="panel-body">
<form method = "POST">
<div class = "form-group">
<textarea class="form-control input-sm" rows="6" name="texttospeech" placeholder="Type your Text Here..."></textarea>
</div>
<div class = "form-group">
<input type = "submit" class = "btn btn-primary btn-block" name="process" value="Speak">
</div>
</form>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
Thanks in advance.
I've searched this one a long time ..
At least selecting Zira within the control panel as default voice works
I have used dropdown for search form like when the search icon is clicked the search form appears. It works and is positioned as expected but when the breakpoint reaches the small screen size, the search form doesn't get properly append with the search icon. You can observe that by running the code and viewing on small screen.
html,body {
font-family: "Roboto", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333333;
background-color: #f0f0f0;
width: 100%;
}
#NavigationSection .bg-light{
background: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
<link href="http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100" rel="stylesheet" >
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="styles/stle.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
</head>
<body>
<!-- Navigation -->
<section id="NavigationSection">
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
LOGO
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navNavbar"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">Home</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item">Link</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" id="search" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-bottom: 0px;padding-top: 3px;"><i class="fas fa-search fa-2x"></i></a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="search" style="min-width:17rem;padding: 0.5rem;float:left">
<form class="form-inline my-lg-0" method="get" action="results.php">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search" name="user_query" required>
<div class="input-group-append"><button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search"><i class="fas fa-search" aria-hidden="true"></i>
</button></div>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>
</nav>
</section>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
In the following line,
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" value="Search" name="search">
Remove my-2, see below (which is responsible for margins in the y axis).
<button class="btn btn-outline-success my-sm-0" type="submit" value="Search" name="search">
I am sure this will do the trick. I hope this helps. Thanks.
I am trying to create a responsive menu, I am not sure my navbar-nav function is working well or not,This is the first time creating,responsive menu.I created the class navbar-nav and uploaded to server and checked with tablet, mobiles, both giving same result,according to the device not changed.please visit the site. Waiting for answer, how to change the below code for responsive menu and proper guidance .
<div class="container">
<div class="navbar navbar-default">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="image/logo.png" alt="Lotus Groups"/>
Lotus Groups</a>
</div>
<ul class="nav navbar-nav" style="float:right">
<li>Lotus Construction</li>
<li>Lotus Interior</li>
<li>Lotus Digital</li>
<li>Lotus Property</li>
<li>Lotus Site</li>
</ul>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
JsFiddle
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
It includes predefined classes for easy layout options, as well as
powerful
mixins for generating more semantic layouts.
Can you please post the css also, so that we can see what is in the class navbar-nav
Edit:
Try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and if that doesnt work,
Have a look at this tutorial
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
You can also try this :
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
<span class="sr-only">Menu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse in" id="bs-example-navbar-collapse-1" aria-expanded="true" style="">
<ul class="nav navbar-nav">
<li><img href="#"><img src="image/logo.png" alt="Lotus Groups"></li>
<li>Lotus Construction</li>
<li>Lotus Interior</li>
<li>Lotus Digital</li>
<li>Lotus Property</li>
<li>Lotus Site</li>
</ul>
</div>
</div></div>
</div>
</body>
I put your image in a li tag to include it in the navbar so on mobile the image won't go on your different menus.
The div tag with class="navbar-header" is here to dispplay a toggle button when screen is to small
EDIT:
I have added a line in your head tag, just add it please.
I've also deleted your first div class container.
It should now work !