First off, I'm pretty new to programming field, just right started.
I got problems with nav links, that works fine in Desktop view. But, it goes un-clickable in responsive view.
Please help me. I'm sure this is easy-peasy for you.
Here's the demo: https://zeraus.github.io/brapstoot/
Thanks!
Bootstrap is a mobile first framework. You established the class for its desktop view but didn't for responsive views.
find the div where the feed goes and add the smaller screen size views classes like this:
<div class="col-xs-12 col-sm-12 col-md-4">
<div class="visible-xs-block"></div>
...
</div>
p.s. don't get discouraged by the down voting and don't stop asking. You are new, you clarified that, so it's normal to make mistakes when you ask. Those downvotes are to protect the integrity of S.O. not to personally to hurt you. You'll get them back as you start posting better. In the meantime, here are some tips:
Never post a link directly to your site. Too many spammers out there. I took a risk. Others won't.
Always post the relevant HTML, CSS, JS or whatever code you have needs attention.
If possible get acquainted with JFiddle.com and codepen post your code there and then the link here so that we have an online editor to work with.
don't come asking for broad answers like "How to build a website?" DO your footwork, try something. And then come asking.
And once you can post screenshots, do so.
If your question doesn't get attetion, don't duplicate the same question.
Don't use profanity and dont insult. We're here to help you voluntarily. We don't have to do it, you know lol
Do that on the next question and you will be golden!
Good luck and code something beautiful!
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
Try like this
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
Related
I am a newbie in terms of web design.
I have centered an image, put a button below it, and when I click this button, some text appears below the image. When I click the button again, the text goes up, and so we see the initial view: only the image and the button (similar to the effect here https://www.w3schools.com/bootstrap4/bootstrap_collapse.asp) .
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Now, I don't want to make this text appear under the image, I want the image to move left and the text to appear on where the image was before when clicking that button, even a little bit more on the right, but still on the same line.
Can someone please help me doing this? Thank you!
Bootstrap doesn't have a pre-fab method to do what you want, and you cannot tweak the collapse method to do it.
However, what you want to do can be easily done within the Bootstrap grid system - just not with pre-fab Bootstrap tools.
Here's how that might look:
$('.btn').click(function(){
$('.imgDiv').animate({
width: '0px'
},1000, function(){
$('img').css('width','0px');
});
$('.txtDiv').animate({
width: '90vw',
marginLeft: '10vw'
},1000, function(){
$(this).removeClass('hidden');
});
});
.full-width {width:100vw;}
.imgDiv{min-height:110px;}
/* max-height required so zero-width does not auto-expand height */
.hidden{width:0px;max-height:100px;overflow:hidden;}
<div class="container">
<div class="row flex-nowrap">
<div class="imgDiv text-center full-width">
<img src="http://placekitten.com/100/100" />
</div><!-- .imgDiv -->
<div class="txtDiv hidden">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div><!-- .txtDiv -->
</div><!-- .row -->
<div class="row d-flex justify-content-center">
<button type="button" class="btn btn-primary">Show Text</button>
</div><!-- .row -->
</div><!-- .container -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
Because Bootstrap4 is built on flexbox (in fact, the entire Bootstrap grid was redesigned around flexbox in Bootstrap4) it is important to know some Bootstrap flexbox classes.
There is a reason why Bootstrap re-did their entire platform from Bootstrap3 to Bootstrap4, primarily to change from using floats to flexbox.
Flexbox requires two things:
A parent container (e.g. DIV, section, aside, p, etc)
One or more child elements (e.g. div, p, img, etc)
You turn flexbox on on the parent: display:flex;
Then, there are various switches. Some are set on the parent (as in the case of justify-content) but others might be set on the items (as with flex-grow:1)
YouTube tutorial - fast-paced and best-of-breed
Here is a great cheatsheet for Flexbox.
Watch the tutorial and in 40 mins from now your problem will be solved -- and you'll know flexbox.
P.S. I have no connection to the video or its presenter - I was fortunate to discover it, and now pass it along.
What's exactly the purpose of col-md-offset-*?
I know the purpose of col-md-12 without the offset. but with that I've no idea, I've tried to play with it but still nothing.
Short version of answer. Offset make empty column with custom width before our column with data. If you want to make empty column with custom width after your column with data then use pull (col-md-pull-*).
Example:
In medium size window we want to create 2 empty cells, 7 cells with content and again 3 empty cells. We could do that this way.
<div class="row">
<div class="col-md-offset-2 col-md-7 col-md-pull-3">OUR CONTENT</div>
</div>
And this is how it would look like without offsets. We should create empty divs with custom width.
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-7">OUR CONTENT</div>
<div class="col-md-3"></div>
</div>
Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-2 moves .col-md-2 over four columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>
.col-md-offset-* to leave a particular number of virtual Bootstrap columns to the left of any column (kind of like invisible place holders).
It is used for giving space from margin-left, you can see in my example first div is used with offset thats why it is displaying from margin left
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
So col-md-12 will take up the whole of the preceding div. But what happens if you dont want to take up the whole div?
Say you only want to take up half the div but want to centre the content then you can do col-md-6 col-md-offset-3 This will make a div of 6 cols wide and offset it by 3. So the content starts 3 cols in and then goes for 6 cols.
You should really read the bootstrap docs about their grid system and how it works.
It is used to move columns to the right. For details, access http://getbootstrap.com/css/#grid-offsetting
col-md-offset-* give margin from left. Like if i need col-md-6 on right but not on left then we need to add "col-md-offset-6" with col-md-6.
Example:
<div class="row">
<div class="col-md-offset-6 col-md-6"></div>
</div>
Try to add this html in your editor and check output in browser.
It is used for giving space from margin-left, you can see in my example first div is used with offset thats why it is displaying from margin left
Try to resize your browser or on other devices to see: https://getbootstrap.com/examples/grid/
Here is my screenshot on large screen (col-lg-* applied), view it on Inspect
.col-md-offset-2 make a space between 2 col-md-* in a row, check image below.
Here is my screenshot on medium screen (col-md-* applied), view it on Inspect
Hope this help.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="col-md-12">
<div class="col-md-2">First col-md-2</div>
<div class="col-md-2 col-md-offset-2"> col-md-2 with offset 2</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-xs-4 col-md-offset-2 col-xs-offset-2">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-md-4 col-xs-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
According to W3School: it is similar to margin-left, but with unit as col. You can try it yourself or read reference there.
I finally figured out how to make the jumbotron image fit the entire width and HEIGHT of a user's browser:
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
Now, when I add another section div class = row, the columns to not show up underneath the jumbotron image. Instead, they show up on the top of the page and overlap the jumbotron text. JS Fiddle: http://jsfiddle.net/srLngrsx/
I isolated each CSS property above and found out that position: fixed is causing this to happen. When I remove position: fixed the columns line up underneath like they should, but the jumbotron image is now a smaller size, not fitting to the screen.
Can anybody identify or explain why exactly position: fixed is causing the other elements to not position properly? How can I make it so the jumbotron header fits the width AND HEIGHT of the page, and the rest of the content shows up below?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Is this what you need?
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
top: 0;
left: 0;
min-width: 100%;
min-height: 100vh;
}
Fiddle
http://jsfiddle.net/srLngrsx/3/
Move your jumbotron in the container and give it a row and full-width column.
http://jsfiddle.net/srLngrsx/1/
<div class="container">
<div class="row">
<div class="col-xs-12 jumbotron text-center">
<h1>test</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmo</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
...
when you use position:fixed for any element , you have to use margin-top for the elements after it . in this example you have to use margin-top for the class row . because the elements after the fixed positioned element will start from the top position of the fixed element.
.jumbotron {
background: url(images/yelllow.png) no-repeat center;
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}
.row {
margin-top:300px;
}
http://jsfiddle.net/srLngrsx/4/
im using the BEM naming convention within a small project and having some slight difficulty in deciding between element and modifier names.
I'm currently working on a hero/splash section of the website. see image below.
Heres my current code -
<div class="hero hero__project">
<div class="grid">
<h1 class="hero__project__title">Final Year Project</h1>
<div class="hero__project__meta">
<p>Published<span>23 Oct 2014</span></p>
<p>Applictions <span>Unity3d, Photoshop, 3ds max</span></p>
</div>
<p class="hero__project__summary">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in </p>
</div>
</div>
My question is - Do you understand what the piece of markup is doing? and is it in line with them BEM methodology. Thanks
As far as I understand BEM, I would say your naming does not make sense. Your Block (or module) would be your .hero. Your Elements would be your main components of your block (i.e. project-title, project-meta, etc). If you needed a modifier on your block for a different state, you could add one in addition to your block (e.g. class=".hero .hero--isHidden)
<div class="hero">
<div class="grid">
<h1 class="hero__project-title"></h1>
<div class="hero__project-meta"></div>
<p class="hero__project-summary"></p>
</div>
</div>
For more in-depth info checkout http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
To answer your question regarding the other names, I guess I would modify my answer slightly. Again, only using the --project modifier to style the other elements if they are indeed different than a hero on another page.
<div class="hero hero--project">
<div class="grid">
<h1 class="hero__title"></h1>
<div class="hero__meta"></div>
<p class="hero__summary"></p>
</div>
</div>
I'm new to BEM and trying to wrap my head around it all. I read one of the rules for BEM was no nested selectors. So based off the 2nd answer, let's say we style the hero title to be black but style project hero titles to be red. Would the CSS look like this?
.hero__title { color: #000; }
.hero--project .hero__title { color: #cc0000; }
I have a section where there is a image of a site and a paragraph thats referencing to that site. I am wondering what would be the correct way, in your opinion how I should wrap these 2 HTML objects.
I have originally thought this would just work(ignore .img-wrap and the h2):
<section class="featured">
<h1> Featured Project </h1>
<div class="img-wrap">
<img src="" height="" width="" alt="Name of Site">
<h2> Title </h2>
</div><!-- .img-wrap -->
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</section><!-- .featured -->
But what if my client adds multiple paragraphs? It will be styled with a background color and margin so it wouldn't look right.
Wouldn't figure and figcaption be appropriate? I can't really tell when I read on it on HTML5Doctor.
<section class="featured">
<h1> Featured Project </h1>
<figure>
<div class="img-wrap">
<img src="" height="" width="" alt="Name of Site">
<h2> Title </h2>
</div><!-- .img-wrap -->
<figcaption>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
</p>
</figcaption>
</figure>
</section><!-- .featured -->
Or maybe just wrap the paragraph?
It's hard to say what the best practice here would be since you haven't given us enough context. I doubt that what you're showing us here really is a good candidate for a <section>, since it seems more like the bulk of an article, especially with that <h1> thrown in there.
As far as using that <figcaption> around paragraphs of content, well, that's not really what it's intended for. Think about a newspaper or magazine article with an image or two to spice it up. The image isn't described in the body of the content, but the image content is related to the article. The captions on the image are brief descriptions of what the image is showing, usually to clarify who or what you're looking at.
For your situation, something like the following might be most appropriate:
<article id="featured">
<h1>Featured Project</h1>
<figure>
<img src="image.jpg" alt="A brief caption about the image.">
<figcaption>A brief caption about the image.</figcaption>
</figure>
<p>
Lorem ipsum, your articlus can goeth here.
</p>
</article>
There's no need for you to wrap the entire article inside of a <figcaption> wrapped inside a <figure>, just to show an image. You don't have to use <figure> at all, and if you do, a <figcaption> is quite possibly unnecessary. Don't get caught up with trying to use HTML5 elements just for the sake of using them. If you don't think there's a compelling reason to use them, your time is probably better spent just getting things built and iterating over them later to make semantic improvements to the markup.