I am new to Drupal 8 platform. To start with I am trying to create a responsive layout using Bootstrap, but I don't want to use ready-made bootstrap theme provided by Drupal. Folder structure of my theme looks like this:
themes
custom
lexus
css
style.css
includes
bootstrap
bootstrap-theme.css
bootstrap-theme.css.map
bootstrap.css
templates
page.html.twig
lexus.libraries.yml
lexus.info.yml
Content of page.html.twig
<div id="page">
{% if page.headline %}
<section id="headline">
<div class= "container">
{{ page.headline }}
</div>
</section>
{% endif %}
<header id="header" class="header">
<div class="container">
{{ page.header }}
</div>
</header>
<section id="main">
<div class="container">
<div class="row">
<div id="content" class="col-md-9 col-sm-9 col-xs-12">
{{ page.content }}
</div>
{% if page.sidebar_first %}
<aside id="sidebar" class="sidebar col-md-3 col-sm-3 col-xs-12">
{{ page.sidebar_first}}
</aside>
{% endif %}
</div>
</div>
</section>
{% if page.footer %}
<footer id="footer" class>
<div class="container">
{{ page.footer }}
</div>
</footer>
{% endif %}
</div>
Content of lexus.info.yml
name: Lexus
description: Two column responsive layout
type: theme
core: 8.x
version: 8.2.0
base theme: bartik
libraries:
- lexus/global-styling
Content of lexus.libraries.yml
global-styling:
css:
theme:
includes/bootstrap/css/bootstrap.css: {}
css/style.css: {}
When the site loads in desktop view it does not seem to be using bootstrap column arrangements. The content section is taking up entire browser width and pushing sidebar_first contents below it. Here is a screenshot of my desktop view:
But when I resize my browser to mobile view it looks like the responsiveness works. Here is the screenshot of mobile view.
Please help me understand what I am doing wrong.
This could be due to your device being considered "large" by bootstrap when it is maximised. You don't currently have a "col-lg-X" class. Try changing
<div id="content" class="col-md-9 col-sm-9 col-xs-12">
to
<div id="content" class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
Related
I just made a project in laravel, some functions just worked normally, but in one .blade, the data didn't show up and the .css didn't work.
<div class="row row-centered">
#foreach ($profils as $profil)
<div class="col-md-4" >
<div class="card" style="width: 18rem;">
<center>
<div class="card-img-top bg-secondary">
<img class="card-img-top" src="{{ asset('storage/foto/'.$profil->foto_img) }}" width="150 ">
</div>
</center>
<div class="card-body" style="padding: 10px;">
<h5 class="card-title">{{ $profil->nama_pendaftar }}</h5>
<p class="card-text">{{ $profil->email }}</p>
<p class="card-text">{{ $profil->kontak }}</p>
</div>
</div>
</div>
#endforeach
</div>
But, it worked well in my teams laptop (firefox).
I think you can try these
Clear your browser cache / run using incognito mode
Try running php artisan view:clear
Are you extending view, if yes is it already the right view
Check if the css is load successfully using your browser developer tools
I'm trying to add a counter up effect to my home page in a symfony 2 application with angular . i have added dependencies in my config.yml file like this :
counter:
inputs:
- "bundles/ubidelectricity/js/custom/waypoints.min.js"
- "bundles/ubidelectricity/js/custom/jquery.counterup.min.js"
and i have called counter in my twig like this :
{% block javascripts %}
{% javascripts
'#jquery'
'#bootstrap_4_js'
'#jqueryui'
'#elfinder'
'#fastclick'
'#angular'
'#angular_storage'
'#angular_table'
'#angular_translate'
'#angular_scroll'
'#angular_file_uplaod'
'#angular_dynamic_locale'
'#bootstrap_colorpicker'
'#videogular'
'#oclazyload'
'#breadcrumb'
'#ui_bootstrap'
'#loading_bar'
'#color_picker'
'#locationpicker'
'#multirange_slider'
'#site_front_scripts'
'#continuous_net_services'
'#continuous_net_directives'
'#site_front_controller' %}<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
and i have added html in the front page like this :
<div class="row pt-5 pb-5">
<div class="col-md-3 text-center">
<span class="counter">3300</span> <span class="counters">+</span>
<span class="counter-text">Buyers Organisations</span>
</div>
<div class="col-md-3 text-center">
<span class="counter">585</span>
<span class="counter-text">Buyer Partners</span>
</div>
<div class="col-md-3 text-center">
<span class="counter">41000</span> <span class="counters">+</span>
<span class="counter-text">Tenders / Quotes </span>
<span class="counter-text"> Every Year </span>
</div>
<div class="col-md-3 text-center">
<span class="counter">658</span>
<span class="counter-text">Industry Categories</span>
</div>
</div>
I use :
php app/console assets:install
php app/console assetic:dump
php app/console assetic:watch
but it doesn't work and there are no animations.
I'm using two plugins to achieve this but it doesn't work perfectly. The two plugins are angulargrid, and slick-carousel. Does anyone know of a plugin that does both these in one?
Here is what I have with using both plugins, its almost good enough except that the carousel causes gaps between the grid items until the window is resized after the page first loads. Can anyone get this to work without any hiccups?
<ul class="dynamic-grid" angular-grid="vm.stories" ag-grid-width="400" ag-gutter-size="20" ag-id="gallery">
<li data-ng-repeat="story in vm.stories" class="grid">
<!--Carousel-->
<slick fade="true" dots="true" ng-style="vm.imageStyle" ng-show="story.images.length > 0" ng-class="{'showImages': story.images.length > 0}">
<div ng-repeat="image in story.images">
<img class="carousel-image" data-lazy="{{ image.filename }}" aria-label="Image" ng-style="vm.imageStyle">
</div>
</slick>
</li>
</ul>
Have you tried this awesome carousel . You can change the perspective to make images as a grid.
Was able to get it to work by using divs. Heres what I have, which also uses infinite scroll.
<div ng-cloak="" layout="column" layout-fill>
<md-content id="content-scroller">
<div>
<div
class="cards-wrap"
angular-grid="vm.stories"
ag-grid-width="400"
ag-gutter-size="20"
ag-id="gallery"
ag-scroll-container="'#content-scroller'"
ag-infinite-scroll="vm.loadMoreStories()"
performantScroll="true">
<div class="card" ng-repeat="story in vm.stories">
<slick fade="true" dots="true">
<div ng-repeat="image in story.images">
<img data-lazy="{{ image.filename}}" aria-label="Image">
</div>
</slick>
<div class="inside">
<h3>{{story.title}}</h3>
<div class="description">{{ story.text }}</div>
</div>
</div>
</div>
<div class="loading-more-indicator" ng-show="vm.loadingMore">
<md-progress-circular md-mode="indeterminate" md-diameter="64" class="progress-swatch"></md-progress-circular>
</div>
</div>
</md-content>
<div>
I am trying to have a single-page Angular-App which has a view in the middle and tools like sidebar and topbar around that. But when the user is not logged in, the view should show a login partial and the side- and topbar should be hidden. As well as there should be a fullscreen background image. I got a working attempt, but it's rather ugly, so I wonder how I could do better:
<body ng-app ="MB">
<div ng-controller="mbMainCtrl as mainCtrl" class="container-fluid">
<!--fullscreen background when not logged in-->
<div ng-hide="$root.loggedIn" class="landing" ng-cloak>
</div>
<div>
<div ng-show="$root.loggedIn" class="row">
<mb-topbar></mb-topbar>
</div>
<div class="row">
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<mb-sidebar></mb-sidebar>
</div>
<!--view always visible, loads the login page as well-->
<div class = "col-sm-6">
<div ng-view></div>
</div>
<div ng-show="$root.loggedIn" class="col-xs-12 col-sm-2">
<div class="row">
<div mb-news-feed-dir></div>
</div>
<div class="row">
<div mb-quest-feed-dir></div>
</div>
</div>
<div ng-show="$root.loggedIn" class="col-sm-1">
</div>
</div>
</div>
</div>
...
</body>
I suggest you use ui-router and have a nested view to accomplish something like this in a more clean way without having to hide and show dom elements.
I'm having a problem in Bootstrap 3 in using col-xs-* for mobile devices..
I'm using below code for mobile..
<div class="row">
<div class="col-xs-6"> div content 1 </div>
<div class="col-xs-6"> div content 2 </div>
<div class="col-xs-6"> div content 3 </div>
<div class="col-xs-6"> div content 4 </div>
<div class="col-xs-6"> div content 5 </div>
<div class="col-xs-6"> div content 6 </div>
</div>
here, div's are equally(50%) sharing in both Mobile Horizontal/Vertical views..
But I want to get 3 div blocks in mobile Horizontal view & 2 blocks in Vertical view..
for this I tried below code also. But no Use...
<div class="row">
<div class="col-xs-6 col-sm-4"> div content 1 </div>
<div class="col-xs-6 col-sm-4"> div content 2 </div>
<div class="col-xs-6 col-sm-4"> div content 3 </div>
<div class="col-xs-6 col-sm-4"> div content 4 </div>
<div class="col-xs-6 col-sm-4"> div content 5 </div>
<div class="col-xs-6 col-sm-4"> div content 6 </div>
</div>
please check below jpg's for ref:
Please help me in this..
You need to adjust the break point for the col-sm-x classes. In bootstraps CSS file, you will find a line like:
#media (min-width: 768px) {
.col-sm-1, .col-sm-2, ....
Change the 768px to wherever you want the break point where those classes to be overridden by the col-xs-x classes.