I am making a section that contain some text but i need the text in the right half of the section and on the left there is a background image for the section, so i made col-md-4 for the unused half because i don't wanna hide the background image and col-md-8 to the text, how to hide the col-md-4 section on the small screen and let the col-md-8 cover the whole section? iam using bootstrap 5
the code:
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4"></div>
<div class="col-md-8 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
the output on desktop:
the output on phones:
To hide element on particluar screen breakpoint use .d-sm-none .d-md-block
<!-- Bootstrap 4.1.x/Twitter Library -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Body -->
<div class="header-main row">
<div class="col-md-4 .d-sm-none .d-md-block"></div>
<div class="col-md-8 col-sm-12 text-center d-flex flex-column justify-content-center align-items center">
<h1 class="first-font">MOBI TECH</h1>
<h2 class="second-font my-4">THE CHEAPEST PRICE<br>THE BEST QUALITY</h2>
<a class="btn-light-outline first-font px-5 py-2 rounded-pill">SHOP NOW</a>
</div>
</div>
this will leave layout as you defined for md screens and hide firs div and make second div 12 cols wide on sm screens.
Related
I am using Bootstrap 5 to build a webpage. My html code is as following:
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<title>Homepage</title>
</head>
<body>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
</body>
</html>
I want to make the <h1> and <span> appear in the same line, rather than one below the other, but am unable to do so. Please help me.
The updated code is as below:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center justify-content-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success ms-3">2020-21 period</span>
</div>
Explanation:
Add class d-flex to make h1 and span in same line.
Add class align-items-center justify-content-center to make them center.
(Optional) Add margin by class ms-3 to the span div to add space between h1 and span
you can use row class and col class like this
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-4">Employee details</h1>
<span class="col-4 badge rounded-pill bg-success">2020-21 period</span>
</div>
</div>
<div class="container-fluid p-1 bg-secondary text-white text-center">
<div class="row">
<h1 class="col-3">Employee details</h1>
<p class="col-3 offset-1 badge rounded-pill bg-success">2020-21 period</p>
</div>
</div>
In a row there are 12 columns. Change the col-3 number to increase or decrease the number of columns that you want to fill.
The offset-1 is the space between the actual column and the previous. The number of the offset works exactly the same.
what you need is a display:flex and align items: center which using bootstrap can be done by the following:
<div class="container-fluid p-1 bg-secondary text-white d-flex align-items-center">
<h1>Employee details</h1>
<span class="badge rounded-pill bg-success">2020-21 period</span>
</div>
Note that if you need a gap between your span and your h1 you either need to give a margin-right to your h1 or margin-left to your span. If you want your h1 & span to be positioned in the middle of the div you need to add justify-content-center
I picked up Bootstrap 5 today
I'm not able to make a 3 stacked column layout with box-1, box-2 and box-3 on-top of each other take 100vh
I've pasted a redacted version of the code below, it really is three boxes stacked on top of each other. I can do this in CSS Grid and Flexbox but not with Bootstrap.
Here are the methods I've already tried which have not worked:
set body and html to height: 100vh
set container to height 100vh - this makes each box 100vh ora box-1 takes 100vh, box-2 overflows up to another 100vh, likewise box-3
make a wrapper class around the content of the body and set that to height 100vh
repeated 1)-3) with utility class vh-100
Any suggestions please?
Thanks
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<section class="container box-1">
<div class="row">
<div class="col">
</div>
</div>
</section>
<section class="container box-2">
<div class="row">
<div class="col">
</div>
</section>
<section class="container box-3">
<div class="row">
<div class="col">
</div>
</div>
</section>
</body>
Seems to me you can dramatically simplify this. I'm not sure why you'd need rows or columns if there's only ever one of each per container. You don't even seem to need more than one container. Let's just us a basic flex column, per the docs.
/* all styles for demo only */
.d-flex {
background: #eee;
}
.box-1:nth-child(even) {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100 p-0">
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
<section class="box-1 flex-fill">Section</section>
</div>
</body>
If you do happen to need the containers and inner structure, just move the flex-fill class out to the rows (and just use one container). It'll work the same.
/* all styles for demo only */
.row {
background: #eee;
}
.row:nth-child(even) {
background: pink;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<div class="container d-flex flex-column vh-100">
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
<div class="row flex-fill">
<div class="col">
<section class="box-1">Section</section>
</div>
</div>
</div>
</body>
I am trying to create 2 flexbox containers one after the other, I have applied a number of classes combination to make this work. Flexbox gets created but when I scroll, the lower one goes below upper one. The output is as shown here: Current Scenario Output.
My requirement is those 2 horizontal bars to be fixed and one after another, irrespective of scrolling.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'personal/mystyles.css' %}">
</head>
<body>
<div class="d-flex flex-column flex-md-row align-items-center pt-1 px-md-4 mb-3 border-bottom shadow-sm sticky-top" style="background-color: #80ccff;">
<h5 class="my-0 mr-md-auto font-weight-normal">
<p>Hello, User </p>
</h5>
<nav class="my-0 my-md-0 mr-md-3">
<a class="p-2 text-dark" href=""><b>Home</b></a>
<a class="p-2 text-dark" href=""><b>Account</b></a>
<a class="p-2 text-dark" href=""><b>Logout</b></a></p>
</nav>
</div>
<!--This div will be used in different html file and first div will be included using 'include' keyword of django. -->
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa;"></div>
</body>
</html>
You can change your second horizontal bar like this and add some css:
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa; position: fixed; width: 100%; margin-top: 50px"></div>
Wrap 2 divs that you want side by side inside a div and make it flex
<body>
<div class="d-flex">
<div>...</div> // your first div
<div>...</div> // your second div
<div>
</body>
I would like to make an adaptive design for a small website with Bootstrap, but I'm a newbie and can't find any solution for my problem here. I want to be able to display the header for a wide set of different devices, it means for cell phones with small display too. So I have written something like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0.5">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
</body>
</html>
It works with every web-browser pretty good, but it doesn't work properly for small resolutions.
This is the normal view of this page:
But after reaching some width (it should be 576px as I see), it breaks my layout into three lines for every div:
It doesn't depend on text or image size, there a lot of place there, so it should be a behavior of the Bootstrap.
How could I avoid it and do a really adaptive design? My page is very simple and it should be a solution to display it properly, I can't understand why Bootstrap doesn't allow it.
Add col for smaller screens. You can remove col-sm and leave only col-
This happen to your code because you didnt set anything for smaller screen than sm and bootstrap by default set any column to col-12. So your three rows on small screens had col-12 inside them. The title went to center cause of text-center class and last image went left cause of text-right.
<header class="bg-light">
<div class="container">
<div class="row p-3 bg-success rounded">
<div class="col-md-2 col-sm-3 col-3 text-left">
<img src="images/home.png" class="img-fluid" alt="Home">
</div>
<div class="col-md-8 col-sm-6 col-6 text-center">
<h2>MainText</h2>
</div>
<div class="col-md-2 col-sm-3 col-3 text-right">
<img src="images/settings.png" class="img-fluid" alt="Settings">
</div>
</div>
</div>
</header>
Live example
If you want different approach on small screens change the col-* classes.
col-xs-* have been dropped in Bootstrap 4 in favor of col-*.
I am trying to fix a code. I want a responsive image with Bootstrap, but it doesn't work. How can I solve the problem?
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
Ivan
Michal Graczyk is correct... img-responsive has been replaced by img-fluid in Bootstrap 4.
You can find more information about the changes from v.3 to v.4 at https://getbootstrap.com/docs/4.0/migration/
You can find more information specifically about images in v.4 at https://getbootstrap.com/docs/4.0/content/images/
I guess there is some problem with your bootstrap CDN when I tried executing your code with proper bootstrap CDN with some random height and width of the image. It was responsive.
This is with respect to bootstrap 3
<!DOCTYPE html>
<html>
<head>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header class="masthead text-center text-white d-flex">
<div class="container my-auto">
<div class="row">
<div class="col-lg-10 mx-auto">
<!--immage responsive do not word on bootstrap -->
<img class = "img-responsive" src = "img/HDtagliata.jpg" alt = "">
</div>
<div class="col-lg-8 mx-auto">
<p class="text-faded mb-5"></p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">alpafin</a>
</div>
</div>
</div>
</header>
</body>
</html>
If you are using Bootstrap 4
Images in Bootstrap 4 are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<img src="..." class="img-fluid" alt="Responsive image">
Since You're using Bootstrap 4 there is no img-responsive class. You should use img-fluid.