I am new to bootstrap and trying to complete my website which include a section something like this . Please help me to achieve this.
here is my code (if that helps)
<div class="row mfoo">
<div class="col-5 illus col-xs-12">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7 col-xs-12 text-right">
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-xs-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
You use col-xs-* but xs size does not exsit in bootstrap-4
So use only col-md-5/7
See working code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row mfoo">
<div class="col-md-5 illus">
<img src="./images/illustration-features.svg" />
</div>
<div class="col-md-7">
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> dsf</p>
<p class="features_desc"> df</p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> df</p>
<p class="features_desc"> df</p>
</div>
</div>
<br />
<div class="row">
<div class="col-7 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
<div class="col-5 col-sm-12">
<p class="features_title"> </p>
<p class="features_desc"> </p>
</div>
</div>
</div>
</div>
</div>
to create your desired layout,
I've reproduce your code here with the solution
<div class="row mfoo">
<div class="col-lg-5 col-sm-12 illus col-xs-12">
<img src="https://cdn.pixabay.com/photo/2018/11/29/21/19/hamburg-3846525_1280.jpg" />
</div>
You can see complete code here: https://jsfiddle.net/wlum/kva1g5mp/7/
I have changed the col-5 into col-lg-5, so when small screen it will call the col-xs-12.
Bootstrap Grid System
In Bootstrap 4, There are two classes that are used for defining mobile devices. For smaller devices they use.col-sm- and for extra smaller devices they use .col-.
Related
I've been experimenting with some of the sample code in the documentation, and in particular laying out three cards in a row.
When I cut'n paste the code into my component page I'm not getting the expected outcome.
<div class="main-container">
<div class="alert alert-app-level">
...
</div>
<header class="header header-6">
<div class="branding">
<a href="" class="nav-link">
<img alt="" src="assets/logo2.png" height="60">
<span class="title">Good day</span>
</a>
</div>
<div class="header-actions"></div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown>
<button class="nav-text" clrDropdownTrigger aria-label="open user profile">
john.doe#vmware.com
<clr-icon shape="caret down"></clr-icon>
</button>
<clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</clr-dropdown-menu>
</clr-dropdown>
</div>
</header>
<div class="content-container">
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>
</div>
</div>
I was expecting three equally sized cards across the web page. Instead I get...
Do I need to install Bootstrap for this to work?
TIA
You are almost there, you are missing one important element in your page structure. The Cards are good, but you need to add <div class="content-area"> just inside of your <div class="content-container"> element.
<div class="content-container">
<div class="content-area"> <!-- THIS IS MISSING -->
<div class="clr-row">
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 1</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 1
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 2</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 2
</div>
</div>
</div>
<div class="clr-col-lg-4 clr-col-12">
<div class="card">
<div class="card-block">
<h3 class="card-title">Card 3</h3>
<p class="card-text">
...
</p>
</div>
<div class="card-footer">
Action 3
</div>
</div>
</div>
</div>
I have a section which must contains an image on the left and a text on the right, and in the next col, I have the opposite, I mean, a text on the left and an image on the right. This is my html:
<section>
<div class="container">
<div class="row no-gutters">
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6"><img src="image.png" alt="" class="img-fluid"></div>
</div>
</div>
</section>
On desktop, it looks as it should, but on mobile, the order should be always an image first and then the text.
What to do?
You should use flexbox order utility classes for this. Flexbox Order Bootstrap
Open the snippet in full screen mode.
Add order-2 order-md-1 to the text and order-1 order-md-2 to image.
Also, for this to work, I had to wrap the text and image with a div with class row
order-2 order-md-1 means that on from smallest devices, make the order of the item 2 and on medium and after that, make order 1
Update: You can add align-items-center to row to vertically center items
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 ">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6 ">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
<div class="row">
<div class="col-md-6">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
<div class="col-md-6">
<div class="feature-desc">
<p>text</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 order-2 order-md-1">
<div class="feature-desc">
<p>text</p>
</div>
</div>
<div class="col-md-6 order-1 order-md-2">
<img src="https://placehold.it/100x100" alt="" class="img-fluid">
</div>
</div>
</div>
</section>
I am trying to learn Bulma and I want to show a simple page with this layout:
<header>
<hero>
<section>
<footer>
I don't understand why they overlap with each other instead of being clearly one below the other.
There is a dummy container that is obviously misplaced and hidden by the header.
The overlapping is also obvious by the search bar that is both over part of the footer and the hero.
https://codepen.io/anon/pen/bLgOWb
<nav class="navbar is-primary is-fixed-top has-text-white">
<div class="container">
<div class="navbar-brand">
<img id="logo" alt="DUB Logo" src="http://code.dlang.org/images/dub-header.png"/>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<div id="navItem" class="navbar-item">Primo</div>
</div>
</div>
</div>
</nav>
<section class="section">
<div class="container dummy">
</div>
</section>
<div class="hero ">
<div class="container has-text-centered is-size-1">
<h1 class="title"> Explore and use libraries and software</h1>
</div>
</div>
<div id="search" class="container">
<div class="columns searchBlock ">
<div class="column is-paddingless">
<form>
<input class="input searchInput" type="text" placeholder="Search">
</form>
</div>
<div class='column is-3 is-paddingless'>
</div>
<div class='column is-2 is-paddingless'>
<a class='button is-primary searchButton'>Search</a>
</div>
</div>
</div>
<footer class="footer">
<div class="container is-text-centered">
<p> Footer </p>
</div>
</footer>
<script src="old.js"></script>
.hero-body is missing
<div class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title"> Explore and use libraries and software </h1>
</div>
</div>
</div>
Bulma - Hero
I think problem with column . change column margin follow this
.columns {
marign:0;
}
In second column, I have a read more button, on click of that, text expands & the icons of 1st & 3rd column also comes down which I do not want... Somebody give me a demo template In which If I click the button, then only the icon below to the text div should come down and should not affect the position of other columns icons. I'm using this code...
<div class="grid">
<div class="row">
<div class="groups col-sm-4 col-xs-offset-4 career-description">
<h1>srv</h1>
<button class="btn-link favorite glyphicon glyphicon-bookmark CLbookmark"></button>
<h3 class="noData_Msg" style="text-align: center;">Sorry, Data is not available for this career.</h3>
<p class="brief_Desc_a">
</p>
<p class="det_DescF" ng-show="readMore">
</p>
<a class="link_b" ng-click="readMore = true" href="javascript:void(0)">Read More</a>
<a class="link_b" ng-click="readMore = false" href="javascript:void(0)">Read Less</a>
</div>
</div>
<div class="row career-cards">
<div class="groups col-sm-4">
<div class="future-trnds">
<img class="img-responsive" src="images/Future_trends_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4 col-xs-offset-8">
<div class="related-Careers">
<img class="img-responsive" src="images/Related_careers_v02.png" alt="">
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="day-in-life">
<img id="no_Gray" class="img-responsive" src="images/Day_In_Life_v02.png" alt=""><img id="gray_Out" ng-Click="false" class="img-responsive gray_Icon hidden" src="images/Day_In_Life_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="introVideo">
<div class="vid_Dimension" style="height: 300px !important;" ng-hide="!video_Url" my-youtube code="video_Url">
</div>
<h3 class="no_Video" ng-show="!video_Url">Sorry, video is not available for this career.</h3>
</div>
</div>
<div class="groups col-sm-4">
<div class="cost-Salary">
<a href="javascript:void(0)" class="modal-cost modal-cont displayTooltip" title="Cost & Salary">
<img class="img-responsive " src="images/Cost_salary_v02.png" alt="Cost & Salary">
</a>
</div>
</div>
</div>
<div class="row">
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<div class="honeycomb" ng-include="'pages/traitTriangle.html'"></div>
</div>
</div>
<div class="groups col-sm-4">
<div class="courses_Colleges">
<img class="img-responsive " src="images/Courses_Colleges_v02.png" alt="">
</div>
</div>
<div class="groups col-sm-4">
<div class="honeycomb-wraper">
<!-- <div class="honeycomb" ng-include="'pages/iconicPeople_grid.html'"></div> -->
<div class="honeycomb" ng-include="'pages/workEnv_Hex.html'"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="content">
<div class="cont">
<div class="slide-text">
<span>Opportunity & Industries </span>
</div>
<div static-image ></div>
</div>
<div class="cont">
<div class="slide-text">
<span>Cost & salary</span>
</div>
<div class="slide-content">
<!-- <img class="img-responsive" alt="modal-image" title="modal-image" /> -->
<div ></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<style>
.border{
border: 2px solid black;
}
.heightWidth{
height: 200px;
width: 200px;
}
</style>
<body>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your first division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 border"> this is your second divsion
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12">
your middle section the text part goess here
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 cl-sm-12 border"> this one is your third division
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
first image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
2nd image goes here
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-md-12 heightWidth border">
3rd image goes here
</div>
</div>
</div>
</body>
</html>
This will work.
What would be the best / correct method to replicate the following using bootstrap. There are four colum, each of which is 25% wide, and I would like to add an image inbetween. The columns remain 25% all the way from mobile to desktop.
Simple
<div class="row">
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
<img src="plus.png" class="img-responsive"/>
</div>
</div>
<div class="col-xs-3 pull-left">
<div class"col-xs-10">
<img src="envelop.png" class="img-responsive"/>
</div>
<div class"col-xs-2 text-center">
</div>
</div>
</div>
PS: You may use text or content for + sign ... its upto you !! I prefer text/content because it will render faster then image.
This seems to do the job, though it's a bit convoluted. The 15-column layout is tricky.
.row.shift-left {
margin-left: -20px;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-11 col-xs-offset-1">
<div class="row shift-left">
<div class="col-xs-3">
<div class="row">
<div class="col-xs-9">Words words words.</div>
<div class="col-xs-3">
<img src="http://placehold.it/300x800" class="img-responsive" />
</div>
</div>
</div>
...
Demo