I am trying to learn Bootstrap. Would like to create simple 3 columns in 1 row.
My code looks like this (just copied it from example in Bootstrap Documentation).
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
</body>
</html>
I tried with all kinds of sizes - "col-sm", "col-xs", etc, tried also "col", "col-different sizes", "col-different sizes-different numbers from 2 to 12" and the columns always stack vertically.
None of the solutions on stackoverflow and the internet seem to work either.
Thanks in advance
Thank you guys for help.
The reason was not including Bootstrap's CSS properly.
Related
I'm working on a react js project where I'm using the mdbootstrap, I'm trying to build a component similar to this
the first picture is for desktop and another is for mobile users
So, I was trying to achieve something similar and I started playing with bootstrap classes but couldn't achieve this in my react project. But to my surprise in my project, the columns are not taking full width. Why is it happening and what can I do?
Here's it working fine in normal HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Google Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-8" style="background-color: red;">
One of two columns
</div>
<div class="col-sm-4" style="background-color: yellow;">
One of two columns
</div>
</div>
</div>
</body>
</html>
Check this code on JsFiddle.
Here's the link for my react js project and the component is profile.js you can check it through navbar: https://codesandbox.io/s/dawn-flower-iqcuz
Here's what I'm getting
This is what I want
Your example code is right so it does not help in solving the problem.
I suspect that you used right class container-fluid (max-width: 100% - 100% of the parent not 100% of the viewport) but this wrapper is placed in another div with a class container (max-width: 1200px).
If so your container-fluid is limited by container and behaves like it because max-width:100% is equal 1200px.
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!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>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
I have this code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="visible-xs-block">visible-xs-block</div>
<div class="visible-sm-block">visible-sm-block</div>
<div class="visible-md-block">visible-md-block</div>
<div class="visible-lg-block">visible-lg-block</div>
</div>
</div>
</div>
</body>
</html>
When I run this on mobile, my phone recognise this as SM, but should as XS.
In this case, I can't see mobile menu with hamburger (code not include) and when I have div with xs-12 and sm-6 it displays wrong.
On PC works everything.
How can I recognise phone (XS size) correctly ?
Put the meta tag in head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
If the problem persist after adding:
<meta name="viewport" content="width=device-width, initial-scale=1">
Try with
<div class="hidden-lg hidden-md hidden-sm col-xs-12">visible-xs-block</div>
instead of
<div class="visible-xs-block">visible-xs-block</div>
Anyways, your code was working fine for me.
You have already tried with google chrome inspect? In the latests version you can select various device type and brand. In this way you can test at different resolution.
The solution it's not always correct, but is a good approximation.
https://developer.chrome.com/devtools/docs/device-mode
What is the main difference between these two keywords in blade, I found that they do same thing, but... The syntax is different, but whats the main difference?
I am using #yield, and #include, but didn't figure out, which is better to use?
I want to extend my CSS styles, I want to load css styles when needed, for example i want to separate styles and options to navbar and separate css styles to my footer defined in navbar.css, footer.css, i want to include in my main.blade.php, but footer isn't allways visible?
How to solve this? Do I think wrong, and its better to put all css to one file?
What about performance?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title> Authentication system</title>
{{--custom css--}}
#yield('css')
{{HTML::style('css/bootstrap.min.css')}}
<!-- Custom styles for this template -->
{{HTML::style('css/navbar.css')}}
</head>
<body>
#if(Session::has('global'))
<p>{{Session::get('global')}}</p>
#endif
#include('layout.navigation')
#yield('content')
#yield('layout.footer')
and footer
#extends('layout.main')
#section('css')
#parent
{{HTML::style('css/footer.css')}}
#endsection
#section('footer')
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<
</div>
</div>
</footer>
#endsection
My code doesn't work.
Instead of
#yield('layout.footer')
write
#include('layout.footer')
This should solve your problem.
Note: I'm using the skeleton grid system.
I am looking to extend the background color of one of my divs to the right, past the 960px container, but I am having no success. Any suggestions?
Current:
What I'm looking for:
HTML:
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Your Page Title Here :)</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/responsive-nav.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="js/responsive-nav.js"></script>
</head>
<body>
<!-- Primary Page Layout
================================================== -->
<!-- Delete everything in this .container and get started on your own site! -->
<div class="container">
<div class="sixteen columns">
<h1 class="remove-bottom" style="margin-top: 40px">Skeleton</h1>
<h5>Version 1.2</h5>
<hr />
</div>
<div class="one-third column">
<h3>About Skeleton?</h3>
<p>Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone. It's based on a responsive grid, but also provides very basic CSS for typography, buttons, forms and media queries. Go ahead, resize this super basic page to see the grid in action.</p>
</div>
<div class="one-third column">
<h3>Three Core Principles</h3>
<p>Skeleton is built on three core principles:</p>
<ul class="square">
<li><strong>A Responsive Grid Down To Mobile</strong>: Elegant scaling from a browser to tablets to mobile.</li>
<li><strong>Fast to Start</strong>: It's a tool for rapid development with best practices</li>
<li><strong>Style Agnostic</strong>: It provides the most basic, beautiful styles, but is meant to be overwritten.</li>
</ul>
</div>
<div class="one-third column" id="support">
<h3>Docs & Support</h3>
<p>The easiest way to really get started with Skeleton is to check out the full docs and info at www.getskeleton.com.. Skeleton is also open-source and has a project on git, so check that out if you want to report bugs or create a pull request. If you have any questions, thoughts, concerns or feedback, please don't hesitate to email me at hi#getskeleton.com.</p>
</div>
</div><!-- container -->
<!-- End Document
================================================== -->
</body>
</html>
CSS:
/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/
/* Table of Content
==================================================
#Site Styles
#Page Styles
#Media Queries
#Font-Face */
/* #Site Styles
================================================== */
#support{
color: #fff;
background-color: #000;
position: relative;
background-size: 100px;
}
One way of achieving this could be to add a new HTML element inside the #support and give it a 100% right padding and 100% negative right margin. Like this:
<div class="one-third column" id="support">
<div class="inner">
...
</div>
</div>
#support .inner {
padding-right: 100%;
margin-right: -100%;
background-color: #000;
}
Then add a 'page' container with overflow hidden to make sure you don't get a scrollbar.
<div id="page">
<div class="container">
...
</div>
</div>
#page {
overflow: hidden;
}
In the first step, the reason I added a new <div> rather than styling the existing #support is that I think it's best to leave <div>s that have grid structure styles alone. We don't want to affect their margins.
Here's a demo.