Navbar is not displayed - css

Why there is no navbar in the below snippet? Am I missing something? If yes, What?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
I want like the below image:
Color is changed!


You missed .navbar-default, adding it will show the navbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>
Update
Also for your information, <center> tag has been deprecated referring to MDN Web Docs
This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
You could use text-align: center or in your case since you are using bootstrap if you want the same effect as <center> you could add the class .text-center to parent element.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid text-center">
<button class="btn btn-large btn-success" onClick="window.print()">Print</button>
</div>
</div>
</div>
</div>


With Bootstrap, a navigation bar can extend or collapse, depending on the screen size.
A standard navigation bar is created with <nav class="navbar navbar-default">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<center><button class="btn btn-large btn-success" onClick="window.print()">Print</button></center>
</div>
</div>
</div>
</div>

Related

Jumbotron not showing as grayish

My bootstrap jumbotron will not show a dark grayish background like what the docs show. Am I doing something wrong?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<br/>
<div class="jumbotron">
<h1 class="display-4">Todo App</h1>
<p class="lead">This is a simple todo app that can help you keep track of your todos.</p>
<p class="lead">
<a class="btn btn-primary btn-lg">Create a new todo list</a>
</p>
</div>

I think you are seeing Bootstrap v4 documentation but as per v5 documentation you need to add classes like bg-light or bg-dark
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<br/>
<div class="p-5 jumbotron bg-light">
<h1 class="display-4">Todo App</h1>
<p class="lead">This is a simple todo app that can help you keep track of your todos.</p>
<p class="lead">
<a class="btn btn-primary btn-lg">Create a new todo list</a>
</p>
</div>

How to adjust column Width in Laravel form-group

Here is simple contact form. Left side column display question that is "x1-question"
and Right side is text field that User type answer.
I would like to controll Left side width size by changing like ...type class="col-sm-5" or sm- 4. but I couldn't adjust what I want width size and it become big slip and view become really ugly.
Could you teach me right col-xx-x code in Laravel form-group please?
Currently when I type long texst question Left side(question part) this is really narrow.
i would like to it to more wide.
my Laravel Framework is 6.18.8
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="panel panel-default">
<div class="form-group{{ $errors->has('x1') ? ' has-error' : '' }}">
<p> {!! Form::label('x1', 'x1-question', ['class' => 'col-sm-2 control-label']) !!} </p>
<div class="col-sm-10">
{!! Form::text('x1', null, ['class' => 'form-control']) !!}
#if ($errors->has('x1'))
<span class="help-block">
<strong>{{ $errors->first('x1') }}</strong>
</span>
#endif
</div>
</div>

You can use a total of 12 columns only, so if you are increase col-sm-2 to col-sm-4, you need to decrease your sibling from col-sm-10 to col-sm-8.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<div class="container">
<div class="row">
<div class="col-xl-12">
<div class="panel panel-default">
<div class="form-group">
<p><label class="col-sm-4 control-label">x1-question</label></p>
<div class="col-sm-8">
<input type="text" class="form-control" value="x1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>

why the elements are not getting spaced?

hey i want the 3 div to be spaced between in the website with the help of bootstrap in the nav bar anmd i am not getting the desired results
i want THE DIV TO BE like this way pls help me to solve it with bootstrap classes
<content of div1> <content of div2> <content of div3>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between ">
<div>// div 1//
</div>
<div class="collapse navbar-collapse " id="navbarSupportedContent">// div 2//
</div>
<div>// div 3//
</div>
</nav>

By default .navbar-collapse is set to flex-grow:1. You need to disable this to get what you want:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-sm navbar-light bg-light d-flex justify-content-between ">
<div>// div 1//
</div>
<div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">// div 2//
</div>
<div>// div 3//
</div>
</nav>

Align button to the right

I know this must be really simple but I'm trying to set a button to the right of the window using only bootstrap 4 classes. It must be in the same row as the text.
<html>
<head>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>
The code is in here

Bootstrap 4 uses .float-right as opposed to .pull-right in Bootstrap 3. Also, don't forget to properly nest your rows with columns.
<div class="row">
<div class="col-lg-12">
<h3 class="one">Text</h3>
<button class="btn btn-secondary float-right">Button</button>
</div>
</div>

<div class="container-fluid">
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary ml-auto">Button</button>
</div>
</div>
.ml-auto is Bootstraph 4's non-flexbox way of aligning things.

You can also use like below code.
<button style="position: absolute; right: 0;">Button</button>

If you don't want to use float, the easiest and cleanest way to do it is by using an auto width column:
<div class="row">
<div class="col">
<h3 class="one">Text</h3>
</div>
<div class="col-auto">
<button class="btn btn-secondary pull-right">Button</button>
</div>
</div>

In my case I needed to align two or more buttons to the right, after several attempts this worked for me:
<div class="float-right">
<button type="button" class="btn btn-primary">First Button</button>
<button type="button" class="btn btn-secondary">Second Button</button>
</div>

try to put your script and link on the head like this:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous">
</script>
</head>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>

Maybe you can use float:right;:
.one {
padding-left: 1em;
text-color: white;
display:inline;
}
.two {
background-color: #00ffff;
}
.pull-right{
float:right;
}
<html>
<head>
</head>
<body>
<div class="row">
<h3 class="one">Text</h3>
<button class="btn btn-secondary pull-right">Button</button>
</div>
</body>
</html>

<v-btn class="float-right"> Download</v-btn>

The bootstrap 4.0.0 file you are getting from cdn doesn't have a pull-right (or pull-left) class. The v4 is in alpha, so there are many issues like that.
There are 2 options:
1) Reverse to bootstrap 3.3.7
2) Write your own CSS.

How to resize the navbar header image?

I'm trying to include an image as my navbar header as the code shows below:
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="logo.jpg" alt="">
</div>
</div>
</nav>
The icon appears but very small. How can I resize it?

You have to reduce the padding of navbar-brand.
See the following example (https://jsfiddle.net/m9acxw28/1/):
.navbar-brand {
padding:0;
}
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #000000;" role="navigation">
<div class="container">
<div class="navbar-header">
<img class="navbar-brand" src="http://placehold.it/100x100" alt="">
</div>
</div>
</nav>
Hint: Make sure the custom CSS is placed after the Bootstrap CSS!

Resources