This is the markup for my index page. I have the jumbotron and below it is a rowthat should be appearing below the jumbotron. But it is not, it is appearing on top of the jumbotron for some reason I can't figure out. ( I have close to none experience in bootstrap)
<div class="jumbotron jumbotron-billboard">
<div class="img"></div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Jumbotron</h1>
<p>
Lorem ipsum is the best
</p>
Sign Up
</div>
</div>
</div>
</div>
<div class="row main-row">
<div class="col-md-3">
text1
</div>
<div class="col-md-3">
text2
</div>
<div class="col-md-3">
text3
</div>
<div class="col-md-3">
text4
</div>
</div>
And here is the .cssfor the jumbotron
.jumbotron-billboard .img {
margin-bottom: 0px;
opacity: 0.8;
color: #fff;
background: #000 url("gogn1.jpg") center center;
width: 100%;
height: 50vh;
background-size: cover;
overflow: hidden;
position:absolute;
top:0;left:0;
z-index:1;
}
.jumbotron {position:relative;padding:50px;}
.jumbotron .container {z-index:2;
position:relative;
z-index:2;
}
It would be very nice if some-one could inform me on why the row isn't just appearing below the jumbotron.
Here is a link to the problem here is a bootply for the problem bootply.com/9vxeaMQ6Xf
Related
i want to add a "contact" card to the website's right-top and sticky, but i have a div there so it's blocking the contact card. how can i fix that?
https://imgur.com/a/cnLDL69
<div class="card card-contact">
<div class="card-header"><h2>Social Media</h2>
</div>
<div class="card-body"><p class="body-card">
Facebook, Instagram, Twitter
</div>
</div>
---CSS---
.card-contact{
width: 20rem;
height: auto;
}
.body-card {
font-size: 1rem;
}
Assuming you are using bootstrap 4 or above you can edit your code like this so as to make your card sticky to top right
.card-contact{
width: 20rem;
height: auto;
}
.body-card {
font-size: 1rem;
}
.main-card{
position:fixed;
top:0;
right:0;
}
<section class="container-fluid">
<div class="row">
<div class="col-lg-4 main-card ">
<div class="card card-contact">
<div class="card-header">
<h2>Social Media</h2>
</div>
<div class="card-body">
<p class="body-card">
Facebook, Instagram, Twitter
</p>
</div>
</div>
</div>
</div>
</section>
I have a working example website from the bootstrap template website and was analysing the code to understand how they created it. Namely how they centered the text on the first page located here. The code for that snipplet is,
<header class="masthead text-center text-white d-flex"> <!-- Background image set here -->
<div class="container m-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
...
</div>
<div class="col-lg-8 mx-auto">
...
</div>
</div>
</div>
</header>
So then I noticed that the m-auto was doing the centering. However, when I attempt to create it from scratch for myself and create this basic code,
<style>
#frontpage {
height: 100vh;
width: 100vw;
}
</style>
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
It doesn't center at all.
What am I forgetting here?
I would suspect that the container gets centered inside it's parent, which takes up the page.
you have copied the code but styles not included for them if guess correctly. anyway, I have corrected please try this one.
<style>
#frontpage {
height: 100vh;
width: 100%;
}
.center-me{
margin: auto;
width: 60%;
text-align: center;
}
</style>
<section id="frontpage">
<div class="center-me">
<div >
<h1> YOU CAN DO IT </h1>
</div>
<div >
<h1> I should be centered </h1>
</div>
</div>
</section>
Is this what you're after?
Version 1
https://codepen.io/panchroma/pen/YdEWZJ
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row">
<div class="col-8">
<h1> YOU CAN DO IT </h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
border:1px solid grey;
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
Version 2
This also centers the text vertically
https://codepen.io/panchroma/pen/KbygzX
HTML
<section id="frontpage">
<div class="container m-auto">
<div class="row vert-align">
<div class="col-8">
<h1>YOU CAN DO IT</h1>
</div>
<div class="col-8">
<h1> I should be centered </h1>
</div>
</div>
</div>
</section>
CSS
#frontpage{
background-color:pink;
height: 100vh;
width: 100vw;
}
.col-8{
margin-left:auto !important;
margin-right:auto !important;
text-align:center;
}
.row.vert-align{
position: absolute;
top: 50%;
left:50%;
-ms-transform: translateY(-50%);
transform: translate(-50%, -50%);
}
I want my div and navbar's width stretch all the way to the right 100% but for some reason, it stops right before it reaches it. I've added screen cap of what I see
screencap
css
.section2{
font-size: 2em;
background-color: white;
width: 100%;
height: 100%;
opacity: .75;
}
HTML
<section class="section2">
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em" >
<div class="col-md-12" >
</div>
</div>
</div>
<br><br>
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em">
<div class="col-md-12">text
</div>
</div>
</div>
<br><br>
<div class="row" align="center">
<div class="col-md-12">
text
</div>
<div class="row" style="font-size:.75em">
<div class="col-md-12">Text
</div>
</div>
</div>
</section>
I found the solution body and html should be set to 0 margin and padding
html, body {
margin:0;
padding:0;
}
I think the parent of your section2 isn't at 100% of your screen.
I'm trying to get some images to scale responsively in their parent container using the Bootstrap img-responsive class, but it's not going well. In this scenario, I want to display between 2 and 4 images in a grid pattern on the screen, and for the images to be responsive inside of their parent div.
The problem is that the images don't shrink with the img-container class.
https://jsfiddle.net/fcLv3750/2/
HTML
<div class="container-fluid">
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="row">
<div class="row-inner">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
CSS
.row-container {
background-color: red;
padding: 5px;
max-height: 50%;
height: auto;
}
.img-container {
padding: 4px;
max-height: 100%;
border: 5px;
border-color: black;
border-style: solid;
}
.col-sm-6 {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.row-inner {
background-color: orange;
height: 50vh; //I want the page contents to resize based on browser window height (no scrolling)
width: auto;
}
NOTE: The following will make the images become responsive, but it throws off the grid by making the img-container the full height of the row, which I prefer not to do. (I do not want the img-container height to be 100%)
https://jsfiddle.net/bm83ts0p/2/
.img-container {
padding: 4px;
height: 100%; //changed from max-height:100%
border: 5px;
border-color: black;
border-style: solid;
}
img{
max-height: 100%
}
A) What is causing the img-responsive class to be ignored?
B) What can I do to make the images responsive, and the img-container div not be 100% height.
EDIT: A key feature is that the content be resized to the browser window with no scrolling, hence the height: 50vh; for each of the 2 rows.
EDIT2: Here is the desired result (which only works when the images are at max-resolution with no scaling. Large images or smaller browser window produce the problems listed above)
I have deleted your wrapper "row-inner" from your code as it causes the clearfix issue. Mostly it is reason.
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
<div class="col-sm-6">
<div class="img-container">
<img src="http://i.imgur.com/gHDJC06.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
Columns in Boostrap grid immediately follows row. e.g row>col to avoid any kind of clearfix issue. Hope it helps.
JS Fiddle : https://jsfiddle.net/dncwdvkq/
I'm using Bootstrap 3.
I need to center a text (h2) in a div with a background. I need that his background not 100% width.
I cannot center them in their column(s) (see screenshot of wrong behavoiur).
This is HTML:
<div class="col-sm-6">
<div class="category-title">
<h2>{{ #value->category }}</h2>
</div>
</div>
And this is the CSS:
div.category-title{display:inline-block;
background-color:#E1001A;
padding:10px;
text-align:center;
margin:0 auto}
div.category-title > h2{color:#FFF;
text-align:center;
text-transform:uppercase;
font-size:200%;}
Thank you
Add class text-center to the parent element of category-title
div.category-title {
display: inline-block;
background-color: #E1001A;
padding: 10px;
margin: 0 auto
}
div.category-title > h2 {
color: #FFF;
text-transform: uppercase;
font-size: 200%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="col-sm-6 text-center">
<div class="category-title">
<h2>Offerte Pala</h2>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="category-title">
<h2>Offerte Pala</h2>
</div>
</div>
</div>
Try class="text-center" from official Bootstrap site. http://getbootstrap.com/css/
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
Try text-center in div class. Something like following.
<div class="col-sm-6 text-center">
<div class="category-title">
<h2>{{ #value->category }}</h2>
</div>