I am trying to show below look but not working.I have added all css and js but not working.
How to align properly nav bar and logo for mobile view and desktop and tap.
Demo: https://stackblitz.com/edit/angular-7-bootstrap-navbar-ujihha?file=src/styles.css
header.component.html:
<div id="page">
<header class="header-container">
<div class="container">
<div class="top-row">
<div class="row">
<div class="col-md-2 col-sm-6 col-xs-6">
<div id="logo">
<!--<img src="images/logo.png" alt="logo">-->
<span>Resort</span>
</div>
</div>
<div class="col-sm-6 visible-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
<div class="col-md-8 col-sm-12 col-xs-12 remove-padd">
<nav class="navbar navbar-default">
<div class="navbar-header page-scroll">
<button data-target=".navbar-ex1-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navigation navbar-collapse navbar-ex1-collapse remove-space">
<ul class="list-unstyled nav1 cl-effect-10">
<li><a data-hover="Home" class="active"><span>Home</span></a></li>
<li><a data-hover="About" href="about.html"><span>About</span></a></li>
<li><a data-hover="Rooms" href="rooms.html"><span>Rooms</span></a></li>
<li><a data-hover="Gallery" href="gallery.html"><span>Gallery</span></a></li>
<li><a data-hover="Contact Us" href="contact.html"><span>contact Us</span></a></li>
</ul>
</div>
</nav>
</div>
<div class="col-md-2 col-sm-4 col-xs-12 hidden-sm">
<div class="text-right"><button type="button" class="book-now-btn">Book Now</button></div>
</div>
</div>
</div>
</div>
</header>
<!--back to top--->
<a style="display: none;" href="javascript:void(0);" class="scrollTop back-to-top" id="back-to-top">
<span><i aria-hidden="true" class="fa fa-angle-up fa-lg"></i></span>
<span>Top</span>
</a>
</div>
Related
I have a problem:
as you can see in the picture, the problem is, that the column doesnt take the full hight. On the left side is what i got and on the right is what i want. Maybe you guys can help me out. Here is the source code which leads to the image on the left. I have searched for a solution but unfortunatelly nothing fits my source code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row m-auto">
<div class="col-md-12 p-0">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style={{ height: "0%", width: "100%", paddingLeft: "0", paddingRight: "0", paddingTop: "8px" }}>
<input class="form-control mr-sm-1" style={{ width: "80%" }} type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style={{marginTop: "7.5px", marginBottom: "7.5px"}}>
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation-->
Message
</div>
</div>
<div class="row">
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
This question is basically the same as this and this, but the overly complex, nested and incorrect Bootstrap grid structure you're using make it almost impossible to make the height work as expected.
If you simplify the markup as recommended in your other questions, the height issue is resolved using the flexbox grow and shrink utilities as explained in the Bootstrap docs...
"Use .flex-grow-* utilities to toggle a flex item’s ability to grow to
fill available space. "
Using vh-100, flex-grow-0, flex-grow-1, flex-column, etc...
<div class="container-fluid d-flex flex-column vh-100">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
...
</nav>
<div class="row flex-grow-1">
<div class="col-md-4 bg-warning">
<!-- this is the left side -->
</div>
<div class="col-md-8 bg-primary d-flex flex-column flex-grow-1">
<div class="row flex-column flex-fill">
<div class="col bg-success flex-grow-0">
<div class="row">
<!-- it should be the full width but unfortunatelly a scrollbar appears because of this section right here... -->
</div>
</div>
<div class="col bg-info flex-fill">
<!-- Should be in the middle and full screen (like the area where you and another person have a conversation--> Message </div>
<!-- should be at the bottom of the Screen like in everyother Chat-->
<div class="col bg-success flex-grow-0"> Text-Input and Button </div>
</div>
</div>
</div>
</div>
https://codeply.com/p/iP18GJ1ZdU
It can be done through display: flex. It is necessary to set height: 100% to take available height.
So I've edited some classes and add some classes.
The complete stackblitz example can be seen here
An example:
<div class="box">
<div class="row box m-0">
<div class="col-md-12 p-0 foo-flex">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Features
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Pricing
</a>
</li>
</ul>
<span class="navbar-text">Navbar text with an inline element</span>
</div>
</nav>
</div>
<div class="container-fluid foo-flex-item">
<div class="row h-100">
<div class="col-md-4 bg-warning">
<div>
<div class="row m-1">
<div class="col-md-11">
Chats
</div>
<div class="col-md-1">
<i class="fas fa-plus-circle"></i>
</div>
</div>
<div class="row mb-2">
<div class="col-md-12">
<form class="form-inline" style="height: 0%; width: 100%; paddingLeft: 0; paddingRight: 0; paddingTop: 8px;">
<input class="form-control mr-sm-1" style="width: 80%;" type="search" placeholder="Suchen" aria-label="Search" />
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Suchen</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="list-group">
<div>
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start" style="7.5px; marginBottom: 7.5px;">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<div class="row">
<div class="col-md-11">Donec id elit non mi porta...
</div>
<div class="col-md-1">
<span class="badge badge-primary badge-pill text-right">5</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-8 bg-primary">
<div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
<div class="row">
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
<img src="..." class="image-head-chat" alt="Responsive image" />
</div>
<div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8">
Text
</div>
<div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
Icons
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Message
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bg-success">
Text-Input and Button
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <script src=" index.js"></script> -->
<link rel="stylesheet" type="text/css"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</script>
Using Bootstrap 4.3 to make a responsive dashboard, I ran into a problem with medium screens. When I resize Google chrome to check the page in different sizes, sadly, the bootstrap toggle button appears when chrome is resized to medium. This is the case with other browsers as well. The following picture is my chrome showing the page. As in the picture, the screen is not that small for the content to disappear and for the toggle button to show up:
The followings are my codes. I would be really grateful if you help me solve the problem.
#media (max-width: 768px) {
.sidebar {
position: static;
height: auto;
}
.top-navbar {
position: static;
}
}
.top-nav-height {
height: 3em!important;
}
.sidebar {
box-sizing: border-box;
background-color: #34495e !important;
height: 100vh;
}
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
For the sake of convenience, I deleted some lines from sidebar menu items, as I think they don't have anything to do with the sizing and toggle button.
Wow, the problem was on the very first line. Changing the 'navbar-expand-lg' on the first line of code into 'navbar-expand-sm' solved my issue.
You need to change navbar-expand-(value)Ex lg/md/sm or custom.you can try this i have added with your code.
<body dir="rtl">
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light p-0 m-0">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#goNavBar" aria-controls="goNavBar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="goNavBar">
<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-2 col-xl-2 col-md-5 sidebar p-0 m-0">
ِDashboard
<div id="NavBarParent">
<ul class="navbar-nav flex-column">
<li class="nav-item rtl d-block">
<i class="fas fa-home ml-2"></i>Home
</li>
</ul>
</div>
</div>
<!-- Sidebar Done -->
<!-- Top Bar -->
<div class="col-md-10 col-xl-10 col-md-7 py-3 top-navbar">
<div class="row align-items-center">
<div class="col-md-4 col-sm-4 col-lg-5 col-xl-5">
<h4></h4>
</div>
<div class="col-md-5 col-sm-4 col-lg-5 col-xl-5">
</div>
<div class="col-md-3 col-sm-4 col-lg-2 col-xl-2" >
<ul class="navbar-nav">
<li><span class="fa-layers fa-fw fa-lg" >
<i class="fas fa-envelope py-1" style="color: #34495e"></i>
<span class="fa-layers-counter fa-lg bullet-sizing">45</span>
</span></li>
<li><span class="fa-layers fa-fw fa-lg mr-2" >
<i class="fas fa-bell py-1" style="color: #34495e"></i>
<span class="fa-layers-counter bullet-sizing fa-lg">2</span>
</span></li>
<li class="nav-item mr-auto"><i class="fas fa-sign-out-alt fa-lg" style="color: #34495e"></i></li>
</ul>
</div>
</div>
</div>
<!-- Top Bar Done -->
</div>
</div>
</div>
</nav>
<!-- Navigation Done -->
I'm new to Bootstrap and having some styling issues with a project I'm working on. When my window is resized and made smaller, my columns start to overlap. How do I fix this and make it so the text (in this case the messages) are always aligned to the left side of the column?
What am I doing wrong here?
I've made an example page here:
https://www.bootply.com/JxB5m6qw8Z
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="/">Chat</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav"></ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
User2 <span class="caret"></span>
<ul class="dropdown-menu">
<li>Settings</li>
<li role="separator" class="divider"></li>
<li><a rel="nofollow" data-method="delete" href="/users/sign_out">Logout</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="fluid-container" style="margin-top: 70px">
<div class="row">
<div class="col-sm-2 sidebar-main">
<div class="sidebar-items">
<div class="sidebar-channels">
<h4>Channels</h4>
<ul>
<div class="sidebar-listitem">
<li># <a data-behavior="chatroom-link" data-chatroom-id="25" href="/chatrooms/25">General</a></li>
</div>
</ul>
</div>
<div class="sidebar-users">
<h4>Current Users</h4>
<ul>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" data-chatroom-id="28" href="/direct_messages/6">User1</a></li>
</div>
<div class="sidebar-listitem">
<li><a data-behavior="chatroom-link" href="/direct_messages/7">User3</a></li>
</div>
</ul>
</div>
</div>
</div>
<div class="col-sm-10 col-sm-offset-2 body-main">
<div class="room-name">
<h2>General</h2>
</div>
<div class="message-window">
<div data-behavior='messages' data-chatroom-id='25' class="messages">
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> csd</div>
<div><strong>User2: </strong> c</div>
<div><strong>User2: </strong> sdc</div>
<div><strong>User2: </strong> sd</div>
<div><strong>User2: </strong> cs</div>
</div>
<div class="message-form">
<form class="new_message" id="new_message" action="/chatrooms/25/messages" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" /><input type="hidden" name="authenticity_token" value="4NCGg4CJSb0jWbL+Xsx+FuNYTIUM/LD/el5IIuF3cRTHLXy9LzFAIUR+T5C8ATiJKeYdrbceMAeTc79E7OgLGg==" />
<textarea rows="1" class="form-control" autofocus="autofocus" name="message[body]" id="message_body">
</textarea>
</form>
</div>
</div>
</div>
</div>
</div>
I am pretty sure your problem is that using col-sm isn't working because your screen is smaller than what that column size is meant to accommodate. Try using col-xs instead.
Not to mention, you used fluid-container instead of container-fluid at one point.
I have some following HTML codes with Twitter bootstrap...
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="col-sm-4">
<img src="img/logo.png" class="img-responsive"/>
</div>
<div class="col-sm-8 col-sm-12">
<div class="col-sm-3 pull-right">
<ul class="social pull-right ul-social-link">
<li style="background: none"> <i class=" fa fa-facebook"> </i> </li>
<li style="background: none"> <i class="fa fa-twitter"> </i> </li>
<li style="background: none"> <i class="fa fa-google-plus"> </i> </li>
</ul>
</div>
<div class="col-sm-8 pull-right">
<div class="col-md-5 pull-right text-right">
<p class="contact"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> +912345678910</p>
</div>
<div class="col-sm-5 pull-right">
<p class="contact"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> mail#indtechhc.com</p>
</div>
</div>
<div class="clearfix"></div>
<div class="col-sm-12">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home<li>
<li>We are<li>
<li>Products<li>
<li>About us<li>
<li>Contact us<li>
</ul>
</div>
</div>
</div>
</div>
</nav>
But it is not working when I trigger the collapse button! please advise.
Make sure you include jquery.js and that it is before bootstrap.min.js
So, want put a navbar-fixed-top in my nav. The proposal is that my nav follow when scrolling page. But the difficulty is that my nav is overlapping the section right below in this case, my carousel slide.
here de jsfiddle
https://jsfiddle.net/fhvo7anz/
<header class="container-fluid">
<div class="container bghead navbar-fixed-top ">
<div class="row">
<div class="col-md-4">
<img class="img-responsive" src="images/logo.png"><br>
</div>
<div class="col-md-8">
<nav class="navbar navbar-default bgnav">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Home<span class="sr-only"></span></li>
<li class="dropdown">
Institucional <span class="caret"></span>
<ul class="dropdown-menu">
<li>Institucional</li>
<li>Missão, Visão e Valores</li>
<li>Organograma</li>
<!--<li role="separator" class="divider"></li>-->
</ul>
</li>
<li>Atividades</li>
<li>Link</li>
<li>Contato</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Procurar">
</div>
<button type="submit" class="btn btn-default">Ir</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
</div>
</div>
</header>
Add this to your CSS:
#carousel-example-generic {
margin-top:150px;
}