These are chat archives for twbs/bootstrap

8th
Feb 2017
Andrew
@Koalaphant
Feb 08 2017 00:07
When in mobile view the borders for the body of text overlaps the container, how can i change that? http://codepen.io/Koalaphant/full/dNqOLa/
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 00:10
@Koalaphant <div id="timeline" class="col-xs-offset-0 col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
@Koalaphant you should remove offset - so set : col-xs-offset-0 for the xs viewport
Andrew
@Koalaphant
Feb 08 2017 00:17
@vstrelianyi I dont fully understand (Im still getting to grasp of the basics) just to clarify, the body of text (timeline div) has a border and when it is in a mobile view mode, the border overlaps the black background of the website. Hope that makes sense!
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 00:18
@Koalaphant have you added col-xs-offset-0 ???
@Koalaphant no overlap for me, after I have added the class
Andrew
@Koalaphant
Feb 08 2017 00:21
@vstrelianyi I did and there was no change, just to make sure, it should now look like this <div id="timeline" class="col-xs-offset-0 col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 00:35
@Koalaphant hmm.. there might be some issue with the codepen interpretation of the bs3
dualen
@dualen
Feb 08 2017 00:35
quick question: shouldn't an img fit 100% inside it's parent when it applied the "img-responsive" class?
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 00:35
@Koalaphant besides pls check if you have closed all the tags. it seems that jumbotron is not closed
Andrew
@Koalaphant
Feb 08 2017 00:41
@vstrelianyi I personally cant see any open tags, ive also tried adding the code to brackets and its still displaying the same results...strange
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 00:44
@Koalaphant remember to put col-* in a row wrapper
@Koalaphant <div class="row">
<div class="col-md-6">
<p class="text-center"><a href="http://www.samaritans.org/" target="_blank"><strong>Good Samaritans (UK)</strong></a> - 116 123</p>
</div>
<div class="col-md-6">
<p class="text-center"><a href="https://suicidepreventionlifeline.org/" target="_blank"><strong>National Suicide Prevention Lifeline</strong></a> - 1-800-273-8255</p>
</div>
</div>
@Koalaphant like that
@Koalaphant <div class="row">
<div id="addednote" class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
<h3>Together, let's prevent suicide:</h3>
<div class="row">
<div class="col-md-6">
<p class="text-center"><a href="http://www.samaritans.org/" target="_blank"><strong>Good Samaritans (UK)</strong></a> - 116 123</p>
</div>
<div class="col-md-6">
<p class="text-center"><a href="https://suicidepreventionlifeline.org/" target="_blank"><strong>National Suicide Prevention Lifeline</strong></a> - 1-800-273-8255</p>
</div>
</div>
</div><!-- addednote -->
</div><!-- row -->
Andrew
@Koalaphant
Feb 08 2017 00:51
Ive tried adding that, but when it is in a mobile view port it goes off the page. Sorry about this haha!
@Koalaphant ive updated the code, could you take a look what Ive done wrong
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 00:57
i would recommend not to put tags between container >row>col-*
Andrew
@Koalaphant
Feb 08 2017 01:04
@vstrelianyi Thanks a lot for that, so what did you change in order to achieve that? Just so I can learn the difference between them
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 01:05
changed .container-fluid to .container
and mover jumbotron outside container
just compare two examples
Andrew
@Koalaphant
Feb 08 2017 01:07
@vstrelianyi What is the difference between .container and .container-fluid. Thanks for your help!
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 01:10
@Koalaphant check http://getbootstrap.com/css/

@Koalaphant Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

Copy

<div class="container">
...
</div>
Use .container-fluid for a full width container, spanning the entire width of your viewport.

Copy
<div class="container-fluid">
...
</div>

Andrew
@Koalaphant
Feb 08 2017 01:12
@vstrelianyi I'm going to do some more reading on it. You've definitely helped me a lot. Thank you very much.
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 01:13
@Koalaphant u welcome
Mesbah
@raphsk
Feb 08 2017 02:19
hi
I'm guessing img-responsive doesn't work in codepen?
NamdyFit Dev
@NAMDY
Feb 08 2017 02:19
@raphsk hello
@raphsk it does
Mesbah
@raphsk
Feb 08 2017 02:20
I've failing to make a image responsive in codepen
Deepak8717
@Deepak8717
Feb 08 2017 04:43

Hey can somebody explain

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body style="height:1500px">

<nav class="navbar navbar-inverse navbar-fixed-top">

      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container" style="margin-top:50px">
  <h3>Fixed Navbar</h3>
  <div class="row">
    <div class="col-md-4">
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>    
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
    </div>
    <div class="col-md-4"> 
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
      <p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p> 
    </div>
  </div>
</div>

<h1>Scroll this page to see the effect</h1>

</body>
</html>

the same code is working on w3schools but not on codepen.io it is also working on notepad and other tools.

NamdyFit Dev
@NAMDY
Feb 08 2017 04:45
@Deepak8717 can't see the full code
@Deepak8717 my bad i had to scroll
@Deepak8717 whats the issue with it? Seems fine to me
Deepak8717
@Deepak8717
Feb 08 2017 04:53
@NAMDY it's fine but not working on codepen.
@NAMDY Same code is not producing the same output on codepen.
NamdyFit Dev
@NAMDY
Feb 08 2017 04:55
@Deepak8717 codepen has been giving a lot of issues lately. what happens when you run it on codepen?
Deepak8717
@Deepak8717
Feb 08 2017 04:57
@NAMDY its not giving the fixed header. header is also moving when i scroll down.
and navbar is verticle instead of horizontal.
Danilo Polani
@Danilo_Polani_twitter
Feb 08 2017 10:41
@Deepak8717 "fixed" means that it's sticked on top, so it will scroll with you. The non-fixed header is the default header
badalsaibo
@heyDante
Feb 08 2017 12:59
@raphsk you imported bootstrap properly.
Damaris Muange
@ndush
Feb 08 2017 13:01
var myVar = 87;
Lokendra
@Lokendra99
Feb 08 2017 13:15
I want an image in the background for an EMPTY div which is responsive.How can I do that ?I tried all the ways but not successful in any.

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<title>portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="portfolio.css">
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Lokendra Sharma</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Summary</a></li>
<li><a href="#">Qualifications</a></li>
<li><a href="#">Skills</a></li>
<li><a href="#">Experience</a></li>
<li><a href="#">Hobbies</a></li>
</ul>

</div>
</nav>
<div class="container">
<div class="row">
<div class=" col-xs-12 col-sm-12 col-md-12 col-lg-12" id="summary">

</div>
</div>
</body>
</html>

summary {

background-image: url('http://mobo.co.uk/wp-content/uploads/2014/11/Website-Design-Background.png');
background-repeat: no-repeat;
font-size: 1em;
width: 100%;
height:100%;
background-size: cover;
}
.navbar {
margin-bottom: 0;
border-radius: 0;
}
Uwe
@uwsd
Feb 08 2017 14:08
What is your problem, because I tested your code and it looks fine, because all your colums are 100%?
If you changes it to 2 columns (I changed lg and md to 2 columns) it works not correct, so remove the width and height in your summary.
Look at my experimental at http://codepen.io/uwsd/full/YNOJKe/
It could be that you want stretch the heigth or width, but than you haven't a responsible solution.
Uwe
@uwsd
Feb 08 2017 14:39
And a solution for absolut clean field you need, I think a box
.box { float: left; display: table; width: 250px; height: 200px; 
      background: url('http://mobo.co.uk/wp-content/uploads/2014/11/Website-Design-Background.png') no-repeat; background-size: cover;}
AliciadW
@AliciadW
Feb 08 2017 18:19
hi everyone
wordpressxpert
@wordpressxpert
Feb 08 2017 18:19
Hello
Vladislav
@Danan96
Feb 08 2017 18:19
Hello
AliciadW
@AliciadW
Feb 08 2017 18:19
I've started playing around with Bootstrap 4 Aplha 6
Viktor Strelianyi
@vstrelianyi
Feb 08 2017 18:19
hi
AliciadW
@AliciadW
Feb 08 2017 18:19
Alpha*
Vladislav
@Danan96
Feb 08 2017 18:20
im too)
wordpressxpert
@wordpressxpert
Feb 08 2017 18:20
Cool
AliciadW
@AliciadW
Feb 08 2017 18:20
Something I've noticed is that it has a weird large-ish 'margin?' on the right side for mobile view, specifically smaller than +-400px
Has anyone else noticed this?
Lukáš Hanák
@lukashanak
Feb 08 2017 18:29
Hey, please.. I just need have boostrap image at the top on the right, under the navbar and next to the text.. I just need something like this https://codepen.io/freeCodeCamp/full/YqLyXB and here is my code https://jsfiddle.net/lukashanak/9n7xjsL6/.. I will be really happy if someone help me :)
AliciadW
@AliciadW
Feb 08 2017 18:35
Hi @lukashanak. You could give the image a position : absolute and then use top:XXpx and left:XXpx to position it. Alternatively you can give it a position : relative and negative margin-top. OR. Have an outer div (parent) and two smaller nested divs and then use your columns to place these next to one another. Also read about flexbox - very useful. https://flexbox.io/
Lukáš Hanák
@lukashanak
Feb 08 2017 18:50
@AliciadW Thank you, I am going to try it .
KameyHameyHa
@KameyHameyHa
Feb 08 2017 19:47
Hey guys
New here
Baillie O'Grady
@baillieo
Feb 08 2017 19:53
hello people! seeking a job and was wondering if bootstrap and foundation are really necessary. i prefer to learn bourbon and neat as structures and presentation is meant to be done in css surely? i just find it redundant adding numerous amounts of random predefined classes and i know it makes it easier but using bourbon & neat is much more preferble to me