I decided to try Bootstrap 4. I have rather a simple HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Template</title>
<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,chrome=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<header class="container-fluid">
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col-1">
</div>
<div class="col-10">
</div>
<div class="col-1">
</div>
</div>
</header>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 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>
But when I hover the latest col-1 element in the developer tools, the horizontal scrollbar appears. Look at the image below.
Firefox bug
Who have any ideas how to wrastle with it?
your code is okay
I tried it in Google chrome, and the horizontal scrollbar doesn't appear
also I download firefox and installed it, then tried what you made, and there is no horizontal scrollbar as well
You may have an error in your firefox, you may download the new version from here;
https://www.mozilla.org/en-US/firefox/new/
Related
Summernote dropdown doesn't work with Bootstrap 5, please help with the below code. The error says Bootstrap doesn't allow more than one instance per element. Bound instance: bs.tooltip.
<html lang="en"><head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-12 mt-3">
<div id="summernote"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#summernote').summernote(
{height:300,
}
);
$('.dropdown-toggle').dropdown();
});
</script>
</body></html>
Codepen link https://codepen.io/murli-vm/pen/XWpLqpp
I have a laravel application.
I am using bootstrap in the frontend alongwith blade templates.
I want to add a background image to my landing page.
I am trying to style the page by putting a background image to the body. But its not working as in the image is not showing
Below is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Latest compiled and minified CSS -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet' type='text/css'>
</head>
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
<body>
#include('partials.header')
<div class="container">
#yield('content')
</div>
</body>
</html>
In My chrome console i don't see any error of not loading the image.
The code for content section
#extends('layouts.master')
#section('content')
<div class="row">
<div class="col-md-12">
<h3>Welcome to your neighourbood Gym</h3>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Plans</h1>
<p>Plans available in our gym!</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Gallery</h1>
<p>Have a look around our gym</p>
<p>Click to view</p>
</div>
</div>
<hr>
<div class="row">
<div class="col-md-12 text-center">
<h1 class="post-title">Contact us</h1>
<p>Click for more details</p>
</div>
</div>
#endsection
Best Regards,
Saurav
Given the following folder structure:
`/public/images/gym_background.jpg`
Change this:
<style>
body {
background-image: {{url('/images/gym_background.jpg')}};
}
</style>
To this:
<style>
body {
// Add a . in front to look in the right folder + dropping the double {{ }}
background-image: url('./images/gym_background.jpg');
}
</style>
Here is a good read on relative vs absolute paths for the extra curious.
If you don't see the image and there's no 404 error in the network inspector, then probably your image is hidden under some other element that takes all the screen and has solid (white?) background. Try setting the same CSS on div.container, then it should work.
UPD: Scratch that, the problem is curly braces. It will work if you remove those {{ and }}.
I'm trying to use the package bootstrap-datetimepicker. I had already followed the installation tutorial. But I couldn't accomplish to get it to work. I imported the files required into app\publicfolder as well.
My Folder Structure
public folder structure
My blade file
<html>
<head>
<title>Laravel Bootstrap Datepicker</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- JS AND CSS -->
<script type="text/javascript" src="{{ URL::asset('js/jquery-3.3.1.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/moment.js')}}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap.js') }}"></script>
<script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.js')}}"></script>
<link href="{{ asset('css/bootstrap.css')}}" rel="stylesheet">
<link href="{{ asset('css/bootstrap-datetimepicker.css')}}" rel="stylesheet">
</head>
<body>
<!-- DATATIME PICKER CODE -->
<img src="{{asset('goku.jpg')}}" alt="Mountain View">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control " />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
</body>
</html>
My Result
The result I'm getting is this, an import with a fail icon. And nothing showing up while clicking.
I have a fresh installed laravel project with all the components updated.
All I did is tried to add app.js in my welcome.blade.php file, after adding the following I get this error
[Vue warn]: Cannot find element: #app
I followed this thread, but it's not relevant as my script is at the bottom of the page.
https://laracasts.com/discuss/channels/vue/fresh-laravel-setup-and-vue-2-wont-work
Here's my file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{$project}} | {{ $title }}</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="/css/app.css" rel="stylesheet" type="text/css"/>
<style>
...
</style>
</head>
<body class="sticky-nav">
<div id="nav">
<div class="display-sm">
<header class="top-header">
<span class="menu-icon">☰</span>
</header>
</div>
<div class="custom-container">
<div id="logo" class="float-left">
<img alt="xyz" src="/images/xyz.png"/><span> xyz</span>
</div>
<div id="btn-project" class="float-right">
<a title="project" href="#" class="btn btn-project">Project</a>
</div>
</div>
</div>
<div class="sub-container">
<h1 id="header-title">{{ $header_title }}</h1>
<h2 id="meta-data"><i class="fa fa"></i>{{$location}} <span id="category"> <i></i>{{$category}} </span></h2>
<div class="clear"></div>
</div>
<script src="/js/app.js"></script>
<script>
var wrap = $(".sticky-nav");
wrap.on("scroll", function (e) {
if (this.scrollTop > 147) {
wrap.find('#nav').addClass("fix-nav");
} else {
wrap.find('#nav').removeClass("fix-nav");
}
});
</script>
</body>
</html>
Error says it all. Vue can't find #app element, so you need to add it:
<div id='app'></div>
https://v2.vuejs.org/v2/guide/
Sometime everything seems got , but we are still getting same error then you have to copy this code and paste in app. blade.
<head>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
.
.
.
.
.
.
</div>
</body>
Verify that your main design file app.blade.php contains a div with the app id just after the <body> tag just like this:
<body>
<div id="app">
.
.
.
</div>
</body>
I have http://chessresearcher.com/test-02.html which should load http://chessresearcher.com/hello.html as a modal, but it doesn't display it! What am I doing wrong? I have kept the code to bare minimum. The code source is http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=modal-with-remote-url which works.
http://chessresearcher.com/test-02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of Twitter Bootstrap Modals with Remote URL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script>
$('#button_id').click(function(){
$('#myModal').modal('show')
});
</script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
Launch Demo Modal
<!-- Modal HTML -->
<div id="myModal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Confirmation</h3>
</div>
<div class="modal-body">
<!-- Content will be loaded here from a remote source -->
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</body>
</html>
and: http://chessresearcher.com/hello.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
The problem is the combination of angular ui and bootstrap 3. I can't find the link that solved the problem for me, but the solution was to add this css:
.modal {
display: block;
height: 0;
overflow: visible;
}
See also this link.