<section class="container">
<div class="row">
<div class="col-md-8">
<h4>Het Parool</h4>
<h2>Help users choose the best online experience</h2>
</div>
<div class="col-md-4 float-md-right">
<img class="preview" src="img/parool-half.png" />
</div>
<div class="col-md-6 float-md-left">
<a class="btn btn-default" href="parool.html" role="button">Link</a>
</div>
</div>
</section>
I'm new to bootstrap and I am not totally getting the grid system.
I made a design here for desktop Desktop version
And I want it to become this on mobile Mobile version
Can someone explain to me how I can do this?
Thanks a lot!
Related
Nowadays, I am developing a simple web app but i have problem about bootstrap row and column.
This is my code.
<div class="row">
<div class="col-md-4">
<p>Col-1</p>
<p>Col-1</p>
<p>Col-1</p>
</div>
<div class="col-md-4">
<p>Col-2</p>
</div>
<div class="col-md-4">
<p>Col-3</p>
</div>
<div class="col-md-4">
<p>Col-4</p>
</div>
<div class="col-md-4">
<p>Col-5</p>
</div>
<div class="col-md-4">
<p>Col-6</p>
</div>
And this is my web app scrennshot
I want to remove white empty area but i don't know what can i do with bootstrap?
I am waiting your advices and ideas.
I find a solution. If you have a same problem please use this library.
Masonry Library
I'm trying to display some objects in 3 columns using Bootstrap 4. When using this code it only appears in 1 column, like this: web 1 column.
But my idea is to be displayed like this (more or less): web template 3 columns.
<div class="row-mt-5">
<div ng-repeat="woman in women">
<div class= "col-lg-4">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
</div>
I want to learn to use Bootstrap classes for object positioning.
First you need to know about the basic layout structure, learn it here, Please note that you need to define the grid layout for all the screens (sm md lg xl) the details are found in the link provided. Please refer to the below fiddle the code fix for your issue. I have included the ng-app and ng-controller for testing purposes, please ignore that.
HTML:
<div class="container-fluid" ng-app="myApp" ng-controller="MyController">
<div class="row">
<div class= "col-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
<!--Card-->
<div class="card">
<!--Card image-->
<img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">{{woman.name}}</h4>
<!--Text-->
<p class="card-text">
<h5>{{woman.field}}{{woman.job}}</h5>
</p>
Learn more
</div>
</div>
<!--/.Card-->
</div>
</div>
JSFiddle: here
I'm working on my personal website and in my skills section, I want to put a row of icons at the top of the container. However, when I attempt to put a row-fluid on top, I run into issues.
I've attached the relevant code and screenshots for reference. Any help is appreciated!
<!--SKILLS DESCRIPTION -->
<div id="skillswrap">
<div class="container">
<div class="row">
<div class="wow fadeIn" data-wow-duration="5s" data-wow-offset="100">
<div class="col-lg-2 col-lg-offset-1">
<h4 style="color:white"><b>SKILLS</b></h4>
</div>
<div class="row-fluid">
<p><img class="img-responsive" src="Theme/assets/img/html5.png" alt="" style="zoom:60%"></p>
</div>
<div class="col-lg-3 centered">
<p><b>Front End Programming Skills</b></p>
<h5>HTML, CSS, JavaScript, Bootstrap, JQuery, AngularJS, Ionic Framework, D3
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Scripting Language Skills</b></p>
<h5>Python, Ruby</h5>
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Object Oriented Experience</b></p>
<h5>Java, C++</h5>
<br>
</div>
<div class="col-lg-3 col-lg-offset-3 centered">
<p><b>Communication</b></p>
<h5>Strong writing, collaborative and interpersonal skills.</h5>
<br>
</div>
<div class="col-lg-3 centered">
<p><b>Software</b></p>
<h5>Exposure to: Postman, JetBrains IDEs, Eclipse, Version control w/ Git, Adobe Creative
Suite.</h5><br>
</div>
<div class="col-lg-3 centered">
<p><b>Diverse Technical Skills</b></p>
<h5>Programming, agile methedologies, QA testing, content management, data analytics</h5>
<br>
</div>
</div><!--/.row -->
<br>
</div><!--/.container -->
</div>
</div><!--/ #skillswrap -->
You either are going to have the offset or push bootstrap classes to push the image right i.e.: adding col-lg-offset-1 to class,
OR
Do it yourself via the position css attribute i.e.: position:relative;left:10px
http://getbootstrap.com/css/ for more info on how to use offset, push classes.
I'm having an issue on chrome for windows where my .card items don't seem to get the right height. They get too much or too little resulting in the issue you can see in my screenshot below. This is only happening on Chrome for Windows as far as I can tell.
Platforms where this issue doesn't happen:
Internet Explorer 11
Microsoft Edge
Firefox
Chrome on mac
JSFiddle
<div class="ui grid stackable container">
<div class="sixteen wide column">
<div class="ui link five doubling cards">
<a class="ui card" href="#">
<div class="image">
<img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//002.png">
</div>
<div class="content">
<div class="header">Ivysaur</div>
<div class="meta">Grass</div>
<div class="description">
</div>
</div>
<div class="extra content">
<span><i class="idea icon"></i>Pokemon</span>
</div>
</a>
<a class="ui card" href="#">
<div class="image">
<img src="http://assets19.pokemon.com/assets/cms2/img/pokedex/full//004.png">
</div>
<div class="content">
<div class="header">Charmander</div>
<div class="meta">Fire</div>
<div class="description">
</div>
</div>
<div class="extra content">
<span><i class="idea icon"></i>Pokemon</span>
</div>
</a>
...
</div>
</div>
</div>
I had the same problem in production on one of my website. The bug appears if the images are not in cache and must be downloaded, only on Chrome, after a recent update.
I found that a commit was about the css-flex used by semantic-ui to produce cards. This bug report details the problem and some workarounds.
I chose to add min-height: 0; to the content of my card and It worked the way it should.
I am not sure if this white space above the div is caused by a media query or by something in the twitter bootstrap css.
Here is the page at mid view: http://postimg.org/image/gq9dfuuah
Here is my markup for the top section of the page:
<div class="page-section intro">
<div class="container">
<div class="logo"><img src="../../images/logo-2.png" id="backdrop"></div>
<div class="intro_wrapper">
<div class="row">
<div class="col-md-6"><span class="pull-right">
<div class="mockup">
<img src="../../images/techandall_shadow_series_apple.png" id="backdrop">
</div>
</div></span>
<div class="col-md-6">
<span class="pull-right">
<div class="saying">Design, Development, Dedication</div>
<div class="left"><p class="lead center">We are highly experienced in Responsive Web Design, Database-driven websites, Content Management Systems, and Custom Web Applications.</p>
</div>
<div class="intro_buttons center-block">
<div class="center_button">
Get A Quote
</div>
</div>
</div></span>
</div>
</div><!-- feature_wrapper -->
</div><!--/.container-->