Bootstrap colums 1-2 zonder spacing

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Siebel Developer

Ben jij beschikbaar voor een nieuwe Freelance uitdaging? Een van onze klanten is op zoek naar een ervaren: Interim Siebel ontwikkelaar Projectinformatie Over een aantal jaar wil de klant overgaan op een andere CRM applicatie. Op dit moment zijn ze hard op zoek naar 4 Senior Siebel developers die hun applicatie verder ontwikkeld. Details van deze Siebel opdracht: Startdatum: 2 januari Projectduur: 24 maanden Uren per week: 32/36/40 Locatie: Den Haag Benodigde vaardigheden voor deze Siebel Development uitdaging Minstens 4 jaar ervaring met Siebel ontwikkeling Goede kennis van en hands-on ervaring met Siebel tools Configuratie en scripting Goede Nederlandse communicatieve

Bekijk vacature »

Senior Front-End Developer

Job Title: Senior Front-End Developer Job Location: Amsterdam, Netherlands Salary & Benefits: Competitive What makes Cognizant a unique place to work? The combination of rapid growth and an international and innovative environment! This is creating a lot of opportunities for people like YOU — people with an entrepreneurial spirit who want to make a difference in this world. At Cognizant, together with your colleagues from all around the world, you will collaborate on creating solutions for the world's leading companies and help them become more flexible, more innovative and successful. And this is your chance to be part of the

Bekijk vacature »

Senior PHP Developer

Tijd om nieuwe stappen te zetten in jouw carrière als PHP Developer? Houd jij je graag bezig met het verbeteren van het product en de kwaliteit van de code? Dan ben jij PHP Developer waar mijn klant en ik naar opzoek zijn! Onze klant, een wereldwijd actieve leverancier op het gebied van Cloud hosting is opzoek naar een ervaren PHP Developer met Laravel, Symfony en/of CakePHP ervaring. Senior PHP Developer Jouw baan als Senior PHP Developer Samen met het development team bestaande uit PHP specialisten ga jij aan de slag met het continue verbeteren van de gebruikte systemen. Bovendien ben

Bekijk vacature »

.NET Developer

.NET Developer De uitgebreide versie Jij hebt ruim twee jaar ervaring als developer. Nu wil je graag je tanden zetten in nog complexere projecten. Samen met je team bereik je nieuwe hoogtes en zelfstandig maak je meters. Je hebt behoefte aan collegae die jou alles leren op het gebied van technologie maar wilt tegelijkertijd ook graag je eigen opgedane kennis delen. Alles wat vandaag nog onbekend is, moet je morgen toepassen in de volgende uitdaging en dàt is wat jou scherp houdt. Je hebt geen zin in een 60-urige werkweek maar haalt wel plezier uit zo nu en dan een

Bekijk vacature »

Technical Data Specialist

Technical Data Specialist Amsterdam Groningen 36-40 Als Technical Data Specialist speel jij een cruciale rol in het verzamelen, inzichtelijk maken en activeren van relevante data voor klanten als Uber, KLM & Volkswagen. Je maakt hiervoor gebruik van analytics- en tag management systemen, datavisualisatietools en data management platformen (DMP’s), die je zelf implementeert. Met jouw inspanningen kunnen marketingkanalen effectiever worden aangestuurd en wordt de doelgroep met een relevantere (gepersonaliseerde) boodschap bereikt. Wat ga je doen? Vaststellen van meetpunten en opstellen van meetplannen Implementeren van DMP’s, tag management & analytics systemen Adviseren van klanten over technische mogelijkheden op het gebied van data

Bekijk vacature »

MUREX CONSULTANT – FINANCIAL SERVICES

MUREX CONSULTANT – FINANCIAL SERVICES Utrecht Technology 13th month pay & Holiday allowance Bonus Program 26 holidays Training & Learning opportunities Laptop & Smartphone 32-40 hours p.w. As a Murex Consultant at Accenture Technology you will work in driven teams and develop innovative solutions that help our clients become ‘high-performance’ organizations. This includes the development of the digital or technology strategy, as well as the optimization, management and security of the underlying infrastructure, applications and data. You will work in international and multidisciplinary project teams, together with the client. Each project is a new challenge. You will work with cutting

Bekijk vacature »

Senior Fullstack Developer (Java/Springboot)

Job Title: Senior Fullstack Developer (Java/Springboot) Job Location: Amsterdam, Netherlands Salary & Benefits: Competitive What makes Cognizant a unique place to work? The combination of rapid growth and an international and innovative environment! This is creating a lot of opportunities for people like YOU — people with an entrepreneurial spirit who want to make a difference in this world. What makes Cognizant a unique place to work? The combination of rapid growth and an international and innovative environment! This is creating a lot of opportunities for people like YOU — people with an entrepreneurial spirit who want to make a

Bekijk vacature »

Digital Product Manager

Digital Product Manager Move, Build, Grow your career! As the premier global asset management and disposition company, Ritchie Bros. helps thousands of people around the world buy and sell heavy equipment, trucks, and other assets every month. With our multiple onsite and online selling platforms and commitment to first-class customer service, Ritchie Bros. is trusted worldwide for making buying and selling easy, efficient, fair, and transparent. If you’re an innovator with an entrepreneurial spirit, we want you to join our growing team – employed in a wide variety of positions from sales to operations to corporate functions – as we

Bekijk vacature »

Ervaren Support Engineer ICT

De Support Engineer ondersteunt met zijn goede technische kennis en ervaring onze klanten. Als collega ben je enthousiast, leergierig en heb je een energieke inzet. Je staat de klant te woord en werkt aan een oplossing van de vraag van de klant. Vanzelfsprekend kan je op je collega’s terugvallen voor hulp en ondersteuning en zij bij jou. Het echt helpen van onze klant vindt je belangrijk, net als het verbeteren van de helpdesk. Bij 2Eenheid kan jij je verder ontwikkelen en je carrière een nieuwe impuls geven. Belangrijkste taken / verantwoordelijkheden Aanname, invoering en correcte afhandeling van support-meldingen die per

Bekijk vacature »

Back-end Python Developer

BACKEND DEVELOPER PYTHON For an international client near Utrecht I'm currently looking for a Back-end Python Developer that has affinity with Data Science. Do you want to work with the most talented people and at the same time work for a company that is engaged in reducing the environmental impact? Then this could be one of the most challenging opportunities. The Responsibilities As a Back-end Developer in this company, you build something that matters in various product development projects, focusing for example on data processing, data storage, data science or platform billing. Product development projects can be executed both on-site

Bekijk vacature »

Back-end PHP Developer

PHP Developer Voor een Nederlandse marktleider op het gebied van online huurplatformen ben ik op zoek naar een medior/senior PHP developer met Symfony ervaring. Sta jij op het punt in je carrière om een nieuwe stap te zetten als PHP developer? Dan zou dit een mooie kans voor je kunnen zijn in Rotterdam. Wat ga je doen? Als de PHP Developer bij ben je onderdeel van het team in Rotterdam, Amsterdam en Breda. Het team bestaat uit Back- en Front-end Developers, Testers, Product Owners, etc. Je zal verantwoordelijk zijn voor de prestaties van de websites en alle andere diensten die

Bekijk vacature »

Young Professional Program Data Scientist

Job description Digital Transformation is rapidly changing the world! Besides looking at the past, companies need to know what is happening now and anticipate on what is going to happen. Data science is driving Digital Transformation. Typical projects Itility is dealing with: Predictive and prescriptive analytics Machine learning Business rule automation and scripting Descriptive dashboards Who are you? You are young, talented and want to kick-start your career. A (almost) graduate with at least a Master in a beta study such as: Computer Science Information Management Econometrics Artificial Intelligence Mathematics Data Science Industrial Engineering Applied Physics Furthermore, you are fluent

Bekijk vacature »

Senior C#.Net / Ontwikkelaar / Developer / Softwar

Functieomschrijving C#.Net / Ontwikkelaar / Developer / Software Engineer Ontwerpen van nieuwe applicaties; Herschrijven van bestaande applicaties; Meedraaien in uitdagende projecten; Code reviewen; Communiceren met de business. Functie-eisen Afgeronde HBO opleiding richting Informatica of vergelijkbaar; Minimaal 8 jaar ervaring als Fullstack Software Engineer; Ervaring met C#.Net en SQL server zijn een eis; Je hebt ervaring met het werken in een Scrum / Agile omgeving; Ervaring in het coachen van collega's; Heb je al kennis van Micrsoft Azure, dan is dit een belangrijke pré; Kennis van ASP .NET, MVC, Rest, Xamarin, XML/JSON en HTML5/CSS3 zijn mooi meegenomen. Bedrijfsomschrijving Deze organisatie is

Bekijk vacature »

LIQUID STUDIO - UI/UX DESIGNER INTERNSHIP

BUSINESS & TECHNOLOGY CONSULTANT (SAP) INTERNSHIP SAP is leading the way in integrating new innovations into the SAP software to best support organizations in today’s disruptive markets. Within the SAP group at Accenture we continuously conduct research on the latest developments and technologies of SAP (related) products and how these products can help our clients improve their business. Your job Within the SAP group at Accenture, we continuously conduct research on the latest developments and technologies of SAP (related) products and how these products can help our clients improving their business. As an intern, you help us with the (market)

Bekijk vacature »

Vacature Front-end Developer

Vacature Front-end Developer Van Ons, Amsterdam Vacature Front-end Developer ES6 kent geen geheimen voor je. Je voegt nog even een extra animatie toe om de website nóg vetter te maken. Korte laadtijden en goede UX zijn heilig. En je neemt geen genoegen met sites die niet geoptimaliseerd zijn voor mobiel. Samen met je gedreven, gezellige en knetterslimme collega’s werk je vanuit ons kantoor in Amsterdam aan de vetste cases voor de mooiste merken. Jouw focus ligt op front-end en je bent dus een belangrijke schakel in de projecten die we afleveren voor onze klanten. Jouw werk gaat de wereld over

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

12/12/2019 10:02:47
 
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.