I want to build Grid structure for Desktop tablet and mobile.
Wrapper class .row and column class .col*** not there in scss.
Do we need to import any css/scss file for dark theme?
The ngx-admin template uses the Bootstrap grid system. The scss files for bootstrap would be in your node_modules folder. You should be able to structure your grid just like you would with Bootstrap
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
Column 1
</div>
<div class="col-sm-12 col-md-4">
Column 2
</div>
<div class="col-sm-12 col-md-4">
Column 3
</div>
</div>
</div>
https://getbootstrap.com/docs/4.0/layout/grid/
Related
I'm trying to build a profile card in Bootstrap 3 and I'm having trouble getting the image to fit into the card. I think I can do this easier if I link to image in the css but I have many profile cards with all different people so I think keeping the image link in the HTML is better in this case.
Here's how I'd like it:
and here's the where I'm at:http://jsfiddle.net/L3789n7u/1/
Any help is greatly appreciated. Thanks!
~Tony
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6">
<div class="well">
<div class="profile-image">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg">
<div class="card-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As ever you have multiple options, here is example of one of them.
<div class="container">
<div class="row">
<div class="people-cards">
<div class="col-md-6" style="border: 1px solid black;">
<div class="row">
<div class="profile-image" style="float:left;">
<img src="https://higherlogicdownload.s3.amazonaws.com/MBGH/4f7f512a-e946-4060-9575-b27c65545cb8/UploadedImages/Board%20Photos/SIZE%20150x190/PAMELA%20HANNON%202015.jpg" />
</div>
<div class="profile-info">
<h3 div class="company">Company Name</h3>
<h4 div class="name">Person Name</h4>
<h5 div class="title">Job Title</h5>
</div>
<div class="profile-link">
VIEW PROFILE
</div>
</div>
</div>
</div>
</div>
</div>
Basically you need to make profile image to float left, so other content will appear next to it. Also because your example how you would like it contains border around card you need to wrap image, info and link in row. If you want to customize image size you can still use all Bootstrap's col-size-number.
Working example on JSFiddle
I am new to web coding entirely and I'm trying to create a grid of art projects for an online portfolio using bootstrap.
I'm trying to make specific columns show on a grid when the relevant button is clicked.
Currently when I click the text 'Video' it hides everything that isn't a video project as desired, but if I then click 'Photo', the video projects will hide and the photo projects will still be hidden and won't show.
Here's my code:
<div class="jumbotron text-center">
Video |
Photo
</div>
<div class="container-fluid">
<div class="row-fluid text-center">
<div class="collapse in col-xs-6 col-sm-4 col-md-3 novideotag">
<p>example: photo project 1</p>
</div>
<div class="collapse in col-xs-6 col-sm-4 col-md-3 nophototag">
<p>example: video project 1</p>
</div>
</div>
I want to be able to click 'Video' and show only video projects, click 'Photo' and show only photo projects but I'm not sure I'm going about it the right way; perhaps some javascript is required?
Below is a very basic jQuery solution to implement the show and hide feature. First assign a ID to the link and use the click() method of jQuery to initiate the click event. e.preventDefault() is used to override the browser's default click behaviour.
To implement the show and hide, call show(), hide() or slideUp(), slideDown() methods. There are many ways to do this. But this is one of the alternatives.
$('#video').click(function(e) {
e.preventDefault();
$('.novideotag, .design').slideUp();
$('.nophototag').slideDown();
});
$('#photo').click(function(e) {
e.preventDefault();
$('.nophototag, .design').slideUp();
$('.novideotag').slideDown();
});
$('#design').click(function(e) {
e.preventDefault();
$('.nophototag, .novideotag').slideUp();
$('.design').slideDown();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="jumbotron text-center">
Video |
Photo |
Design
</div>
<div class="container-fluid">
<div class="row-fluid text-center">
<div class="collapse in col-xs-4 col-sm-4 col-md-4 novideotag">
<img src="http://placehold.it/200x200" />
<p>example: photo project 1</p>
</div>
<div class="collapse in col-xs-4 col-sm-4 col-md-4 nophototag">
<img src="http://placehold.it/200x200" />
<p>example: video project 1</p>
</div>
<div class="collapse in col-xs-4 col-sm-4 col-md-4 design">
<img src="http://placehold.it/200x200" />
<p>example: Design Project</p>
</div>
</div>
Is it possible to have 3 columns (3,6,3) on a wide screen but when brought to mobile or iPad size, the center column drops down so you effectively have the 2 '3' columns come together as '6','6' and under them stacks the full width '12' column?
Currently I have tried the html below, but this stacks them all three on top of each other at the mobile level, rather than dropping the center down to it's own new row.
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">TESTING LEFT</div>
<div class="col-sm-12 col-md-6">TESTING MID</div>
<div class="col-sm-6 col-md-3">TESTING RIGHT</div>
</div>
</div>
One way to do this is to create two "Mid" divs, show one when the screen is large, but hide that one when the screen is small. Hide it by adding hidden-md and hidden-lg. Also add hidden-sm and hidden-xs to the first one.
I created a demo with styling so you can see the different divs more easily.
Bootply Demo
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">TESTING LEFT</div>
<div class="hidden-sm hidden-xs col-xs-12 col-md-6">TESTING MID</div>
<div class="col-xs-6 col-md-3">TESTING RIGHT</div>
</div>
<div class="row hidden-md hidden-lg">
<div class="col-xs-12 col-md-6">TESTING MID</div>
</div>
</div>
In your situation, you can do that with push and pull classes:
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3">LEFT md first in content</div>
<div class="col-sm-6 col-md-3 col-md-push-6">Right md Second in content </div>
<div class="col-sm-12 col-md-pull-3 col-md-6">Central MD last in content</div>
</div>
</div>
DEMO: http://jsbin.com/muvov/1/
I have this:
<div class="row">
<div class="col-sm-8">
...
...
</div>
</div>
I want those 8 small columns to float in the middle of the available page width. If I add a col-sm-offset-2 but that just pushed everything right, even if there wasn't space. Advice?
If you encompass your row in a container, it should center everything. So that, with the col-sm-offset-2 should achieve what you want, e.g.
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
...
</div>
</div>
</div>
I am using Bootstrap v-3.0.2. And I faced an issue while using pull-right into div col class.
please have a look at following URL.Check both full screen and minimized view.
Bootstrap-3 issue
In Mobile-view both panels are merged. But it should be separate.
Both div panels class has grid axis value 12 (col-xs-12).
If I am try with different value it is working fine.
Is it a bug on bootstrap 3 ?
Use col-sm-push and col-sm-pull instead.
Also, you don't need to use col-md-6 and col-lg-6 if you want 50% width columns on any screens larger than xs...
<div class="container">
<!-- div's are merged.But It should be one after another -->
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Right Panel</h3>
</div>
<div class="panel-body">
Right Panel content
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Left Panel</h3>
</div>
<div class="panel-body">
Left Panel content
</div>
</div>
</div>
</div>
</div>
Bootply
I'm not sure why you would need to add .pull-right to the columns, but if you add .clearfix to the other column, it should resolve this issue.
I think you might get better results using the .col-xx-pull-x and .col-xx-push-x classes to accomplish the same thing. See the grid documentation "Column Ordering" section for more info on this.