I'm trying to use bootstrap4 with create-react-app. I realized bootstrap.min.css was missing so I put the following line in index.html in the public folder
<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">
I tried using a card and the colors were missing.
<div className="card card-inverse card-primary mb-3 text-center">
<div className="card-block">
<blockquote className="card-blockquote">
React.js
</blockquote>
</div>
</div>
If I then typed a letter in the like
<head>s
<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">
The the card color would show. If I then remove the letter and hit save the color disappeared. What is going on here?
Actually i don't know what should i see on page, but i can help you with live editor which uses create-react-app. I did same thing for you and get some nice view on screen sandbox link
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.
I am using bootstrap 4. When i write header with header tags (h1,h2,h3...), the header should display in a single line. what happens is the next content is getting displayed with the header tag without line break. what could be the reason?
I have make sure that the header tag close properly
<div class="row"> <h2>Expertise</h2> <p>Php, html5, css3, wordpress, </p> </div>
the expected output should be like above
but it display like below. everything comes in 1 line with different font size. expertise is bigger than rest content.
Expertise Php, html5, css3, wordpress,
Add columns to add content with in row as follows
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col">
<h2>Expertise</h2>
<p>Php, html5, css3, wordpress, </p>
</div>
</div>
</div>
Bootstrap 4 Grid System Rules
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Ref: https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
This is because of the class "row" which contains display:flex. If you want to use row, then apply css "flex-direction" : column.
It will bring h2 to next line.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="">
<h2>Expertise</h2>
<p>Php, html5, css3, wordpress, </p>
</div>
</body>
I have not encountered this before, and I am having a very hard time trying to find the solution. When having a column equal to medium in bootstrap like so:
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
The text-align works fine:
But when making the column equal to extra small like so:
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
Then the text-align no longer works:
Is there some bootstrap concept that I am not understanding or is this in fact a error like I think it is. I have never had this issue, as my text always has aligned in the past with xs. Any help would be greatly appreciated.
Here is my complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
</head>
<body>
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>vicki williams</h1>
</div>
</div>
</div>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<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>
</html>
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
Replace col-xs-12 with col-12 and it will work as expected.
Also note col-xs-offset-{n} were replaced by offset-{n} in v4.
I just wondered, why col-xs-6 did not work for me but then I found the answer in the Bootstrap 4 documentation. The class prefix for extra small devices is now col- while in the previous versions it was col-xs.
https://getbootstrap.com/docs/4.1/layout/grid/#grid-options
Bootstrap 4 dropped all col-xs-* classes, so use col-* instead. For example col-xs-6 replaced by col-6.
They dropped XS because Bootstrap is considered a mobile-first development tool. It's default is considered xs and so doesn't need to be defined.
In Bootstrap 4.3, col-xs-{value} is replaced by col-{value}
There is no change in sm, md, lg, xl remains the same.
.col-{value}
.col-sm-{value}
.col-md-{value}
.col-lg-{value}
.col-xl-{value}
you could do this, if you want to use the old syntax (or don't want to rewrite every template)
#for $i from 1 through $grid-columns {
#include media-breakpoint-up(xs) {
.col-xs-#{$i} {
#include make-col-ready();
#include make-col($i);
}
}
}
If you want to apply an extra small class in Bootstrap 4,you need to use col-.
important thing to know is that col-xs- is dropped in Bootstrap4
I'm trying to use this and create a different landing page utilizing it.
Here is the HTML. The rest is on codepen.
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,700,900,300,100' rel='stylesheet' type='text/css'>
<div class="overlay">
<div class="wrap">
<h1>Scrolling Form</h1>
<input type="text" placeholder="Username">
<input type="email"placeholder="Password">
<input type="submit" value="Sign In">
<i class="fa fa-question"></i>Forgotten Password
<i class="fa fa-user"></i>Create an Account
</div>
</div>
I'm fairly new to coding and using Codepen but when I copy the code into Sublime Text 2, it doesn't work.
Why is that and what can I do to fix this problem?
This may seem obvious, but if you're copying and pasting that code exactly as it appears in the pen, then it isn't working becasue;
1) It's not a full HTML document. It's just a snippet of the body. It need's a doctype, head, body and html tags. Without a complete HTML structure, the browser doesn't treat it as an HTML document.
2) Even if you were creating a full HTML document out of the example, it won't work as-is from Codepen, because Codepen attaches the CSS to the HTML automatically. You would have to link the CSS file in the head of the HTML document for it to work locally.
<head>
<title>Copied from Codepen</title>
<link href="/style-from-codepen.css" rel="stylesheet">
</head>
For some reasons I have to use JQM and Bootstrap in my mobile application.
But the problem is that there is a conflict between them. The proble is that the footer will appear fine WITHOUT bootstrap link but once its is added, only half of the footer will be seen. How do we solve this issue ? Is there any way to say html page to use a certain css conditionally ?
Thanks in advance.
CODE:
<!--HEADER-->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/jquery.min.css"/>
<!-- STUFFS-->
<div data-role="footer" data-position="fixed">
<p align="center">© Mobile App</p>
</div> <!-- FOOTER -->