Bootstrap colums 1-2 zonder spacing

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Integratie Developer / Architect

Dit ga je doen Als Integratie Developer / Architect binnen deze organisatie krijg je echt de kans om impact te maken. De organisatie is groeiende maar houdt een corporate cultuur buiten de deur. Heb je een goede business case: zorg voor goede argumentatie en ga ervoor! Geen stroperig beslissingsproces dat jouw ideeën in de weg staat! Enkele van jouw taken: Je ontwerpt en ontwikkelt nieuwe integraties met behulp van interne tools (Boomi) of externe partners; Je vertaalt functionele specificaties naar technische oplossingen; Je denkt mee over strategische ontwikkelingen op het gebied van applicatie integratie; Je voert regie op leveranciers en

Bekijk vacature »

Fullstack developer (NodeJS, React, AWS)

Functie Als Fullstack developer kom je te werken in het ontwikkelteam, maar zoals gezegd komt er veel meer bij kijken dan alleen maar ontwikkelen. Je bent samen met je collega’s continu bezig om de software uit te breiden maar hiernaast doe je doorlopend onderzoek naar de inzet van bijvoorbeeld Machine Learning. Ze willen met hun software echt voorlopen op andere en toegevoegde waarde leveren voor de eindgebruiker. Mede hierom zijn ze erg benieuwd naar iemand zijn persoonlijkheid, of hij graag nieuwe dingen uitzoekt (Google!), en initiatief neemt. Maar waar staan ze nu? Na een onderzoeksfase van ruim een jaar zijn

Bekijk vacature »

Creatieve Front-end developer gezocht!

Functie Het front-end team bestaat momenteel uit 4 collega’s en is hard aan het groeien! Samen leveren jullie een essentiële bijdrage aan de applicaties die ze voor hun klanten realiseren. Je werkt in het front-end team samen met de back-end teams en product owners om te zorgen dat de applicaties een fijne gebruikerservaring opleveren. Jouw expertise zorgt ervoor dat de juiste keuzes gemaakt worden qua techniek en ontwerp, van back-end tot aan gebruiker. In samenspraak met je team bepalen jullie de beste keuze voor techniek. Ook is er altijd ruimte om nieuwe technieken te ontdekken. Eisen • Je hebt gedegen

Bekijk vacature »

Low Code Developer

Functie omschrijving Ben jij toe aan een nieuwe uitdaging en ben jij HBO afgestudeerd in de richting van IT? Heb jij verstand van datamodellering, NO CODE Platformen en kun jij het aan om projecten te leiden? Voor een leuke opdrachtgever in omgeving Rotterdam zijn wij op zoek naar een No Code developer die zich bezig gaat houden met het optimaliseren van bedrijfsprocessen bij klanten in heel het land! Wat ga je hier zoal doen? Je gaat geen code kloppen maar bedenken hoe applicaties eruit moet komen te zien. Je gaat werken met een non code platform, je kunt denken aan

Bekijk vacature »

Junior Low-code ontwikkelaar gezocht omgeving Arnh

Bedrijfsomschrijving Wij zijn een dynamisch IT-bedrijf dat zich richt op het stroomlijnen van bedrijfsprocessen en het creëren van ondersteunende applicaties. Onze kracht ligt in het combineren van zakelijk inzicht met IT-expertise via gestroomlijnde procesontwerpen en wendbare applicatieontwikkeling met behulp van Low-code technologieën. Als jonge professional krijg je de kans om samen te werken met een team van 15 deskundige collega's, verspreid over nationale en internationale locaties. We bieden je een leerzame omgeving waar je je vaardigheden kunt ontwikkelen en groeien in je rol als Low-code ontwikkelaar. Word jij onze nieuwe Junior Low-code Ontwikkelaar (OutSystems)? Versterk ons team en draag bij

Bekijk vacature »

Junior .NET developer

Functie Ons programma is voor afgestudeerde enthousiastelingen die het als een uitdaging zien om met een klein dynamisch team bij de grootste bedrijven van Nederland aan de slag te gaan. Tijdens jouw dienstverband word jij begeleid door een talent manager. Het ontwikkelen van jouw talent staat hierbij centraal. Het programma doorloop je met een team van circa 8 Mede- trainees. De eerste maand start je met een fulltime inhouse opleiding. Deze staat geheel in het teken van de werkzaamheden die jij verder in het programma zult uitvoeren. Na deze opleidingsmaand ga je aan de slag in een dynamische omgeving bij

Bekijk vacature »

Front-end Developer - React - Data Driven

Bedrijfsomschrijving Onze klant is een snelgroeiende organisatie die een data-driven inspectieapp op de markt hebben gebracht die nu al een aantal jaar door verschillende organisaties wereldwijd gebruikt wordt. Er zijn zo'n 6 mensen werkzaam bij dit bedrijf en ze zijn nu vooral op zoek naar een sterke front-end developer die wil gaan werken aan nieuwbouw applicaties en de uitbouw van de huidige applicaties. De reden dat ze zoeken is omdat er veel werk op komst is en ze hier de juiste capaciteit voor willen hebben. Er heerst hier een hele prettige sfeer waarin respect en eerlijke communicatie belangrijk is. Ook

Bekijk vacature »

Laravel Developer

Functie omschrijving Voor een gave organisatie in de buurt van Den Bosch zoek ik een PHP developer. Het is van belang dat je kennis/ervaring hebt met het framework Laravel. Jij gaat in deze functie software applicaties ontwikkelen. Deze software projecten zijn heel divers, en deze organisatie maakt software, van A tot Z. Klanten kunnen in elke sector werkzaam zijn, van profit tot non-profit. Andere taken zijn onder andere: documentatie schrijven over applicaties/uitleg geven over software en applicaties/ klantcontact over bestaande applicaties/applicaties optimaliseren. Bedrijfsprofiel Deze organisatie zit in de regio van Den Bosch en is een klein bedrijf. Er werken circa

Bekijk vacature »

Microsoft Acess Developer

Functieomschrijving Wat ga je doen? Heb jij ongeveer 3 jaar ervaring als Software Developer, en komen de volgende kennisgebieden jou niet vreemd voor: MS Acces, C# & SQL? Vind jij het daarnaast leuk om maatwerk software te ontwikkelen voor klanten in een bijzondere branche? Lees dan snel verder! Als developer ben jij samen met een gemotiveerd team van 10 collega’s verantwoordelijk voor het creëren van aangemeten software voor klanten. Je bent klantvriendelijk en oplossingsgericht ingesteld, omdat het essentieel is om de klanten zo goed mogelijk te helpen met hun uitdagingen. Het is mogelijk om vanuit huis je werkzaamheden uit te

Bekijk vacature »

Software Developer C# - Deventer

Software Developer C# – Deventer Bijdragen aan de toekomst van het onderwijs! Ben jij op zoek naar een dynamische omgeving waar vol enthousiasme wordt gewerkt aan software voor interactieve dashboard- en analysetoepassingen ter verbetering van het onderwijs? Dan zijn wij het bedrijf voor jou! TIG is een bedrijf met een informele en ondernemende werksfeer, waarbij goede ideeën snel leiden tot concrete acties. Wij zijn een software ontwikkelorganisatie en focussen ons op het ontwikkelen en implementeren van oplossingen voor het leveren van managementinformatie, datavisualisatie en analyses voor het onderwijs. Met onze dashboard- en analyseoplossingen zetten scholen gegevens om naar betekenisvolle informatie.

Bekijk vacature »

Java Developer

Dit ga je doen Ontwerpen en bouwen van nieuwe functionaliteiten binnen de complexe omgeving; Proactief de processen kwalitatief en efficient inrichten; Opzetten van Unit Tests; Code Reviews; Regie nemen voor innovatieve projecten; Landschap beheren en de bijbehorende ketens hierbij in het oog houden. Hier ga je werken De organisatie is actief binnen de financiele branche en heeft een IT afdeling van circa 450 man. De organisatie voorziet de maatschappij binnen de financiele dienstverlening en is gedurende de jaren een onmisbare schakel geworden. Het is een high profile organisatie waar ze veel te maken hebben met veranderingen voortkomend uit maatschappelijke ontwikkelingen,

Bekijk vacature »

.NET developer

Functie Als ervaren .NET ontwikkelaar start jij in één van onze vier scrumteams. Met 30 ontwikkelaars werk jij aan de doorontwikkeling van ons core product. Ook werkt jouw team aan maatwerkoplossingen op aanvraag van de klant en op projectbasis. Wij vinden het erg belangrijk dat onze ontwikkelaars met plezier naar werk gaan. Een deel hiervan ligt uiteraard bij jezelf, als jij ontwikkelen niet leuk vindt, ben jij bij ons echt aan het verkeerde adres. Jouw team bestaat namelijk uit een groep gepassioneerde vakidioten die dit werk doen omdat dit eerst een hobby was! Daarnaast wordt er intern rekening gehouden met

Bekijk vacature »

Junior Java Developer

Dit ga je doen Full stack web- en appdevelopment; Vertalen van de functionele wensen naar de technische specificaties; Sturing geven aan/klank board zijn voor de software teams; Trainen van de software teams; Sparren met klanten; Meedenken over architectuur. Hier ga je werken De organisatie is een bureau welke websites en mobiele applicaties bouwt voor verschillende toonaangevende organisaties. Hierbij richten zij zich voornamelijk op de sectoren leisure, overheid en zorg. De sfeer intern kenmerkt zich door informaliteit, gezelligheid en ambitie. Ze werken dag in dag uit samen om mooie producten op te leveren voor hun klanten. Op dit moment zijn er

Bekijk vacature »

Medior front-end developer gezocht (€3.300 -

Functie Wat ga je doen? Jij als front-end developer gaat werken binnen de teams van/voor onze klant. Je werkt in een team met starters en ervaren ontwikkelaars met allemaal 1 overeenkomst; passie voor het vak. Maak je een fout? Geen probleem, leer ervan en ga dan weer door. Door de variëteit aan werk kun je in verschillende omgevingen een kijkje nemen en jezelf dus snel ontwikkelen. Wat hebben we jou te bieden? • Uitdagende projecten bij mooie klanten (bij jou in de buurt, of binnenkort intern vanuit ons kantoor!) • Een jonge organisatie met talentvolle collega’s • Veel ruimte voor

Bekijk vacature »

Medior Front-end Developer

Bij Getnoticed doen wij wat we leuk vinden, websites bouwen en online marketing. Voor veel van onze klanten doen we dan ook allebei. Wel zo fijn om campagnes te draaien voor conversiegerichte websites die in eigen beheer zijn. In onze vestiging in Nederweert zit onze development afdeling en worden de websites gebouwd. Op dit moment zijn we op zoek naar jou: dé Medior Front-end Developer die net als wij, het hoofd boven het maaiveld durft uit te steken! In het kort Even een paar punten die omschrijven wat deze toffe baan inhoudt: Het uitwerken van designs tot functionele layouts Je

Bekijk vacature »

Pagina: 1 2 volgende »

Jan Graneker

Jan Graneker

05/10/2015 11:07:53
Quote Anchor link
Goedemorgen Allemaal,

Ben nog bezig met bootstrap en zit met het volgende:

[Colum1][spacing][colum2]

Nu wil ik graag [Colum1] en [colum2] tegen elkaar aan zetten, dus zonder de spacing. Ik er een standaard code om de spacing te verwijderen tussen beide?
 
PHP hulp

PHP hulp

05/11/2024 22:27:31
 
Ozzie PHP

Ozzie PHP

05/10/2015 11:12:05
Quote Anchor link
Waarschijnlijk even de margin naar o zetten in je css-bestand.
 
Jan Graneker

Jan Graneker

05/10/2015 11:22:21
Quote Anchor link
Ik heb het volgende gedaan:


[colum1] [colum2 style="margin:0; padding:0;"]

Nu heb ik nog 20px als spacing ipv 40.
Gewijzigd op 05/10/2015 11:45:25 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 11:24:39
Quote Anchor link
Dan geef je die column in je html een class, bijv. class="nospace" en dan in je css

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  margin: 0;
}
 
Jan Graneker

Jan Graneker

05/10/2015 11:33:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="row">    
                <div class="col-lg-4 nospace">
                    <div style="height:552px; background-color:#77767b;">
                        <img src="images/gear_icon.png" class="img-responsive"/>
                            <div class="col-lg-11" style="margin-left:10px;">
                                <h1>Homepagina</h1>
                                <p>Dit is een tekst</p>
                            </div>    
                    </div>        
                </div>
                
            
            
                <div class="col-lg-8 nospace" >
                    <img src="images/homepage_img.jpg" class="img-responsive" alt="CNC machine" />
                </div>
            
</div>


De nospace wordt wel herkent, alleen gebeurd er niks.
Gewijzigd op 05/10/2015 11:50:10 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 14:40:04
Quote Anchor link
Dan zal je even een online voorbeeld moeten plaatsen. Kan er zo weinig van zeggen.
 
Pieter R

Pieter R

05/10/2015 14:52:03
Quote Anchor link
Of deze?
table {
border-spacing: 0px;
}
Gewijzigd op 05/10/2015 14:52:18 door Pieter R
 
Jan Graneker

Jan Graneker

05/10/2015 14:59:09
Quote Anchor link
Bedankt dat jullie de moeite willen nemen om te kijken. Dit is de eerste keer dat ik alles in BS probeer te zetten. Kom er alleen met de spacing niet uit.


Ik wil graag de afbeelding etgen het [homepagina] blok plakken. Wat is de beste manier?
Gewijzigd op 05/10/2015 15:23:59 door Jan Graneker
 
Ozzie PHP

Ozzie PHP

05/10/2015 15:16:58
Quote Anchor link
Verander nospace maar eens in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  padding: 0;
}
Gewijzigd op 05/10/2015 15:17:20 door Ozzie PHP
 
Jan Graneker

Jan Graneker

05/10/2015 15:26:26
Quote Anchor link
Ozzie PHP op 05/10/2015 15:16:58:
Verander nospace maar eens in dit:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
.nospace {
  padding: 0;
}


Bedankt Ozzie. Weet jij toevallig ook waarom margin:0 niet werkt en ik in plaats hiervan de padding moet gebruiken?
 
Ozzie PHP

Ozzie PHP

05/10/2015 15:37:01
Quote Anchor link
Margin is de buitenkant van je box. Padding zit in je box. Even op Google het verschil opzoeken tussen margin en padding ;)
 

05/10/2015 16:39:48
Quote Anchor link
@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl
 
Jan Graneker

Jan Graneker

05/10/2015 17:01:47
Quote Anchor link
Rickert Bombaklats op 05/10/2015 16:39:48:
@jan, kan je je algehele voorbeeld uitleggen of wellicht tekenen?
Ik werk dagelijks met Bootstrap en heb zelf soms ook wat dingetjes.

Wat wel belangrijk is is dat je het grid systeem van Bootstrap als richtlijn gebruikt en niet alles erop wilt zetten.

Bekijk deze websites, deze zijn met Bootstrap in elkaar gezet.
http://lemon-internet.nl
http://dezaal.nl
http://tvmoordrecht.nl


Ik design bijna alles in de BS grid. Ook kom er aardig uit met de colums probeer niet veel op de spacing te zetten. Ik ben nu alles gebaseeerd op het LG-screen. Als je me zou willen uitleggen hoe ik nu goed alles kan aanpassen voor MD en S zou het super zijn.
Gewijzigd op 05/10/2015 17:03:41 door Jan Graneker
 
Joni Fleischer
Moderator

Joni Fleischer

06/10/2015 08:29:51
Quote Anchor link
Als het goed is heeft elke column een padding left en een padding right.
Er wordt gekeken of het de eerste of laatste column is. (:first-child of last-child).

Alles wat er tussen zit heeft dus links en rechts padding. (Geen idee hoeveel, maar ga uit van 40 px)

.col-lg-4:last-child {
padding-right: 20px;
}
.col-lg-4 {
padding: auto 0;
}
.col-lg-4:first-child {
padding-left: 20px;
}
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 10:36:15
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="mySelector">
    <div class="row">
        <div class="col-md-6">
        ...
        </div>
        <div class="col-md-6">
        ...
        </div>
    </div>
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}


Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.
Gewijzigd op 06/10/2015 10:40:19 door Eschwin Moerkerken
 
Jan Graneker

Jan Graneker

06/10/2015 11:16:16
Quote Anchor link
Eschwin Moerkerken op 06/10/2015 10:36:15:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
<div id="mySelector">
    <div class="row">
        <div class="col-md-6">
        ...
        </div>
        <div class="col-md-6">
        ...
        </div>
    </div>
</div>


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
#mySelector .col-md-6:first-of-type {
padding-right:0;
}

#mySelector .col-md-6:last-of-type {
padding-left:0;
}


Vergeet ze alleen voor mobiel niet weer op de standaard 15 pixels te zetten in je media queries, anders krijg je scheve kolommen onder elkaar ;).

Edit: Op deze manier kun je trouwens ook de spacing vergroten of verkleinen.



Ik maak nu gebruik van alleen de col-LG om hem op de desktop goed te krijgen.
Stel dat ik een col-lg-12 heb. Kan ik deze dan voor de mobiel zo laten, of moet ik in dezelfde class een col-xs-12 meegeven?
 
Jan de Laet

Jan de Laet

06/10/2015 11:53:46
Quote Anchor link
Volgens mij kun je bij bootstrap werken van klein naar groot.
Wat je bij md opgeeft is ook geldig voor lg (tenzij het overruled wordt), wat je bij sm opgeeft is ok geldig voor md en lg, enz.
 

06/10/2015 12:08:08
Quote Anchor link
Jan, ik snap niet waar je heen wilt met je code of iets.
Normaal doe je met Bootstrap aangeven hoeveel kolommen je wilt hebben op een bepaalt formaat van het scherm.

col-lg-12 is 12 kolommen naast elkaar op een groot scherm
col-md-12 is 12 kolommen naast elkaar op een middel scherm

Als je nu met een mobiel of tablet naar de website zal gaan zullen de 12 kolommen onder elkaar weergegeven worden ivm het "mobile-first".

Als je op een mobiel ook naast elkaar wilt hebben zet je op dezelfde div col-xs-12, mits je wilt dan hij maar 6 kolommen naast elkaar is o.i.d dan geef je col-xs-6.

Na een paar keer vragen weet ik nog steeds niet wat Jan wilt bereiken...?

Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 12:10:05
Quote Anchor link
Als je hem alleen een col-lg-12 meegeeft, zal hij altijd 12 kolommen breed zijn op kleinere devices (dus MD, SM en XS). In jouw geval geef je hem 12 kolommen mee (100%) dus maakt het in dit geval niets uit.

Stel je hebt twee kolommen naast elkaar van col-lg-6 en je zou die op een kleiner scherm (laptop bijvoorbeeld) ook naast elkaar willen hebben (mits er ruimte is) dan zou je ook een col-md-6 moeten toekennen en zou je in principe de col-lg-6 kunnen weg laten.

Zoals Jan de Laet al zei, je kan van klein naar groot werken. Dus heb je iets kleins gespecificeerd dan zal de grote deze altijd overnemen.

Stel je maakt gebruik van een col-md-6 dan zal deze op zowel MD ans LG 6 kolommen zijn, daar onder (SM en XS) 12 kolommen (standaard).

Toevoeging op 06/10/2015 12:12:47:

Rickert Bombaklats op 06/10/2015 12:08:08:
Je hoort normaliter de padding o.i.d van Bootstrap niet aan te passen.


Deze kun je prima aanpassen. De 15 pixels per kolom die zij hanteren is standaard.
Als je precies weet wat er gebeurd als je ze aanpast en wat de .row dan doet dan zou je dit zonder problemen prima kunnen aanpassen als je meer ruimte nodig hebt.

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.
 
Randy vsf

Randy vsf

06/10/2015 12:40:47
Quote Anchor link
Eschwin Moerkerken op 06/10/2015 12:10:05:

Normaliter zou je ook .col-md-offset-1 kunnen gebruiken bijvoorbeeld. Helaas is dat soms net weer iets teveel ruimte. Nadeel daarvan is dat je dan met 11 kolommen werkt in plaats van 12.


.col-md-offset-1 haalt aan allebei de kanten 1 eraf.
Je houd dus 10 kolommen over.
 
Eschwin Moerkerken

Eschwin Moerkerken

06/10/2015 13:06:58
Quote Anchor link
@randy je weet kennelijk niet wat een offset inhoudt. Een offset betekent dat iets wordt overgeslagen. Dus er wordt een kolom over geslagen.

Toevoeging op 06/10/2015 13:14:50:

@Jan Graneker: http://codepen.io/anon/pen/dYWRbr
 

Pagina: 1 2 volgende »



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.